轮播图制作

最新推荐文章于 2024-09-02 17:34:07 发布

Gordon_Chao

最新推荐文章于 2024-09-02 17:34:07 发布

阅读量221

点赞数 2

分类专栏：前端学习文章标签： javascript 前端 servlet

本文链接：https://blog.csdn.net/m0_64645111/article/details/126654023

版权

前端学习专栏收录该内容

11 篇文章 0 订阅

订阅专栏

本文介绍了一个使用HTML、CSS和JavaScript编写的轮播图实现。代码中详细展示了如何通过监听页面加载事件、设置样式、动态添加元素以及响应式设计来创建一个轮播图组件。当鼠标悬停在轮播图上时，左右导航按钮显示，离开时自动切换图片。此外，还实现了点击小圆点切换图片的功能。

摘要由CSDN通过智能技术生成

html代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="rollingPic.css" />
    <script src="../animate.js"></script>
    <script src="rollingPic.js"></script>
</head>
    
<body>
    <div class="box">
        <a href="javascript:;" class="left"><img src="../../../../案例/left.png" alt=""></a>
        <a href="javascript:;" class="right"><img src="../../../../案例/right (2).png" alt="" ></a>
        <ul class="pic">
            <li><a href="#" class="li-link"><img src="../../../../案例/one1.jpg" alt="" class="nana"></a></li>
            <li><a href="#" class="li-link"><img src="../../../../案例/two2.ipg.jpg" alt="" class="nana"></a></li>
            <li><a href="#" class="li-link"><img src="../../../../案例/three3.jpg" alt="" class="nana"></a></li>
            <li><a href="#" class="li-link"><img src="../../../../案例/four4.jpg" alt="" class="nana"></a></li>
        
        </ul>
        <ol class="circle">
        </ol>
    </div>
</body>
</html>

CSS

*
{
    margin:0;
    padding: 0;
}
.box
{
    width: 794px;
    height: 476px;
    position: relative;
    top:250px;
    left:500px;
    overflow: hidden;
    background-color: #949494;
    border:red solid 1px;

}
body
{
    background-color:#949494;
}
.pic
{
    width:500%;
    height: 476px;
    margin:0 auto;
    position: absolute;


}
.pic li
{
    width:794px;
    height: 476px;
    float: left;
    list-style: none;
}
.left img,.right img
{
    display: block;
    position: absolute;
    width: 40px;
    height: 100px;
}
.left
{
    position: absolute;
    left:0px;
    top:195px;
    z-index: 1000;
    display: block;

}
.right
{
    position: absolute;
    left:754px;
    top:195px;
    z-index: 1000;
    display: block;

}
.circle
{
    width: 400px;
    height: 25px;
    position: fixed;
    top:660px;
    left: 808px;
}
.circle li
{
    width: 25px;
    height: 25px;
    display: block;
    border-radius: 50px;
    border:solid azure 1mm;
    float: left;
    margin-right: 6px;
}
.current
{
    background-color:azure ;
}
.nana
{
    width: 794px;
    height: 476px;
}

javascript

window.addEventListener('load',function()
{
    var box=document.querySelector('.box');
    var left=box.querySelector('.left');
    var right=box.querySelector('.right');
    var pic=box.querySelector('.pic');
    var width=box.offsetWidth;
    console.log(box.offsetWidth);
    console.log(pic.offsetWidth);
    pic.addEventListener('mouseover',
    function()
    {
        left.style.display='block';
        right.style.display='block';
        clearInterval(time);

    })
    box.addEventListener('mouseleave',function()
    {
        left.style.display='none';
        right.style.display='none';
        time=setInterval(function()
       {
        right.click();
       }
     

    ,2000);
    
    })
    var circle=box.querySelector('.circle');
    var circleLi=circle.querySelector('li');
    console.log(pic.children.length);
   
    for(var i=0;i<pic.children.length;i++)
    {
        
        var li=document.createElement('li');
        li.setAttribute('index',i);
        
        circle.appendChild(li);
        li.addEventListener('click',function()
        {
            var index=this.getAttribute('index');
            for(var i=0;i<circle.children.length;i++)
            {
                
                circle.children[i].className='';
            }
            this.className='current';
            shu=num=index;
            console.log(num);
            animation(pic,-index*width);
            
        })
    }
    circle.children[0].className='current';
    var first=pic.children[0].cloneNode(true);
    pic.appendChild(first);
    var num=0;
    var shu=0;
    left.addEventListener('click',function()
    {
          
       if(num==0)
       {
        console.log(circle.children.length);
        console.log(pic.children.length);
        num=pic.children.length-1;
        pic.style.left=-num*width+'px';
       }
       num--;
       shu--;
       if(shu<0)
       {

        shu=circle.children.length-1;
       }
       for(var i=0;i<circle.children.length;i++)
       {
         circle.children[i].className='';
       }
       circle.children[shu].className='current';
       animation(pic,-num*width);
    })
    right.addEventListener('click',function()
    {
       
       
       if(num==pic.children.length-1)
       {
        num=0;
        pic.style.left=0;
       }
       num++;
       shu++;
       if(shu==circle.children.length)
       {
        shu=0;
       }
       for(var i=0;i<circle.children.length;i++)
       {
         circle.children[i].className='';
       }
       circle.children[shu].className='current';
       animation(pic,-num*width);

    })
    var time=this.setInterval(function()
       {
        right.click();
       }
     

    ,2000)
    
})


        //封装函数
        function animation(obj,target,callback)
        {
            clearInterval(obj.timer);
            obj.timer=setInterval(function()
        {
            //把步长写到计时器里面
            //往大取整
            var step=(target-obj.offsetLeft)/10;
            step>0?Math.ceil(step):Math.floor(step);
            if(obj.offsetLeft==target)
             {
                clearInterval(obj.timer);
                console.log(obj.offsetLeft);
                console.log(obj.style.left);
             };
             if(callback)
             {
                callback();
             };
             obj.style.left=obj.offsetLeft+step+'px';
        }
            
            ,15);
        }

嗯写个轮播图心态快崩了，不是人写的简直🤮