美文网首页html,css,js网页制作前端前端
简单轮播图的实现及原理讲解(js)

简单轮播图的实现及原理讲解(js)

作者: 拾实 | 来源:发表于2018-10-25 23:15 被阅读0次

    0.最终效果预览

    鼠标未触及区域时(自动滚动中) 鼠标触及区域后 (停止滚动,显示按钮)
    基本功能
    • 自动无缝滚动
    • 左右按钮控制滚动
    • 点击圆点切换图片

    1.整体结构与思路

    Html部分

    <body>
        <div id= "parent">
            <div id="uls">
                <ul id="img_ul">
                    <li><img src="imgs/0.jpg"/></li>
                    <li><img src="imgs/1.jpg"/></li>
                    <li><img src="imgs/2.jpg"/></li>
                    <li><img src="imgs/3.jpg"/></li>
                    <li><img src="imgs/4.jpg"/></li>
                </ul>
                <ul id='litCir_ul'></ul>
            </div>
            <div id="buttons">
                <span id="left">&lt;</span>
                <span id="right">&gt;</span>
            </div>
        </div>
    </body>
    

    三个div,最外层id为parent的大div内包含了ulsbuttons两个div,divuls中包含了两个列表img_ul(图片列表), litCir_ul(小圆点列表),divbuttons里则包含了“左”, “右”两个按钮。

    CSS部分

    #parent{
        position: relative;
        margin: 50px auto;
        padding: 0;
        width: 500px;
        height: 309px;
    }
    
    #uls{
        position: relative;
        margin: 0;
        padding: 0;
        width: 500px;
        height: 309px;
        overflow: hidden;
    }
    
    #img_ul{
        position: absolute;
        margin: 0;
        padding: 0;
        left: 0;
        top: 0;
        width: 3000px;           /*多留出一张图片的宽度!*/
        list-style: none;
    }
    #img_ul li{
        float: left;
        margin: 0;
        padding: 0;
        width: 500px;
        height: 309px;
    }
    #img_ul li img{
        width: 500px;
        height: 309px;
    }
    
    #litCir_ul{
        position: absolute;
        margin: 0;
        padding: 0;
        right: 10px;
        bottom: 10px;
        list-style: none;
    }
    #litCir_ul li{
        margin: 0;
        padding: 0;
        float: left;
        width: 20px;
        height: 20px;
        text-align: center;
        line-height: 20px;
        border-radius: 50%; 
        margin-left:10px ;
        cursor: pointer;
    }
    
    li.active{
        background-color: white;
    }
    li.quiet{
        background-color: #1e90ff;
    }
    
    #buttons{
        margin: 0;
        padding: 0;
        display: none;
    }
    #buttons span{
        position: absolute;
        width: 40px;
        height: 40px;
        top: 50%;
        margin-top: -20px;
        line-height: 40px;
        text-align: center;
        font-weight: bold;
        font-family: Simsun;
        font-size: 30px;
        border: 1px solid #fff;
        opacity: 0.3;
        cursor: pointer;
        color: #fff;
        background: black;
    }
    #left{
        left: 5px;
    }
    #right{
        left: 100%;
        margin-left: -45px;
    }
    

    需要注意的地方

    • 图片的宽,高度应和img_ul中的li标签, 以及div#parent, div#uls的宽,高度一致。
    • img_ul的宽度应为(图片数目+1)*每张图片的宽度。也就是要多留出一张图片的宽度(下一部分解释)。
    • div uls部分使用overflow:hidden隐藏img_ul超出的部分,确保每次该区域只能显示一张完整的图片。

    2.功能实现(JS部分)

    ①将会在下面用到的Html中的对象和一些变量

        /*获取HTML中的对象*/
        var parent = document.getElementById("parent");
        var img_ul = document.getElementById("img_ul");
        var litCir_ul = document.getElementById("litCir_ul");
        var buttons = document.getElementById("buttons");
        var cLis =litCir_ul.children;
    
        var len = img_ul.children.length;     //图片张数
        var width = parent.offsetWidth;       //每张图片的宽度
        var rate = 15;                        //一张图片的切换速度, 单位为px
        var times = 1;                        //切换速度的倍率
        var gap = 2000;                       //自动切换间隙, 单位为毫秒
        var timer = null;                     //初始化一个定时器
        var picN = 0;                         //当前显示的图片下标
        var cirN = 0;                         //当前显示图片的小圆点下标
        var temp;
    

    ②添加小圆点

    之所用js添加小圆点,是因为小圆点的数量是由图片张数决定的。

        for (var i=0; i<len; i++){
            var a_li = document.createElement("li");
            a_li.className = 'quiet';
            litCir_ul.appendChild(a_li);
        }
        litCir_ul.children[0].className = "active";
    

    默认liclassquiet, 第一张默认为active

    ③无缝滚动是怎么实现的?

    首先先理解该轮播图如何滚动,这里是通过控制img_ulleft值来控制显示某张图片, 为了实现“滚动”的效果,我们需要逐渐改变img_ulleft值,而不能直接使该值变化图片宽度的倍数。这里我们定义一个动画效果函数Roll()

    function Roll(distance){                                         //参数distance:滚动的目标点(必为图片宽度的倍数)
    clearInterval(img_ul.timer);                                     //每次运行该函数必须清除之前的定时器!
    var speed = img_ul.offsetLeft < distance ?  rate : (0-rate);     //判断图片移动的方向
    
    img_ul.timer = setInterval(function(){                           //设置定时器,每隔10毫秒,调用一次该匿名函数
        img_ul.style.left = img_ul.offsetLeft + speed + "px";        //每一次调用滚动到的地方 (速度为 speed px/10 ms)         
        var leave = distance - img_ul.offsetLeft;                    //距目标点剩余的px值      
        /*接近目标点时的处理,滚动接近目标时直接到达, 避免rate值设置不当时不能完整显示图片*/
        if (Math.abs(leave) <= Math.abs(speed)) {                    
            clearInterval(img_ul.timer);
            img_ul.style.left = distance + "px";
        }
    },10);
    }
    

    试想下面的情况,当图片从最后一张切换到第一张时,这时就不能通过逐渐改变img_ulleft值来实现滚动的效果,于是克隆第一张图片至列表尾部,当滚动完最后一张图片时,继续滚动到克隆的第一张,然后将img_ulleft值置为0。

        /*克隆第一个li到列表末*/
        img_ul.appendChild(img_ul.children[0].cloneNode(true));
    

    ④自动滚动

    function autoRun(){
        picN++;
        cirN++;
        if(picN > len){                  //滚动完克隆项后
            img_ul.style.left = 0;       //改变left至真正的第一项处
            picN = 1;                    //从第二张开始显示
        }
        Roll(-picN*width);
        
        if(cirN > len-1){                //判断是否到了最后一个圆点
            cirN = 0;                 
        }
        for(var i=0; i<len; i++){
            cLis[i].className = "quiet";
        }
        cLis[cirN].className = "active";
    }
    

    需要注意的是小圆点和图片列表的li数目是不一样的,当滚动到最后一个克隆项时,此时小圆点实际上在第一个位置。

    开始自动滚动:
    timer = setInterval(autoRun, gap);

    ⑤触及小圆点时切换至对应图片

        for(var i=0; i<len; i++){
            cLis[i].index = i;
            cLis[i].onmouseover = function(){
                for(var j=0; j<len; j++){
                    cLis[j].className = "quiet";
                }
                this.className = "active";
                temp = cirN;
                picN = cirN = this.index;
                times = Math.abs(this.index - temp);  //距离上个小圆点的距离
                rate = rate*times;                    //根据距离改变切换速率
                Roll(-this.index * width);
                rate = 15;
            }
        }
    

    给每个小圆点绑定了onmouseover事件,这个方法有个细节,会根据两次小圆点的距离差调整速率为rate*times,使切换效果更自然(也就是说每次切换说花的时间基本一致,无论是第一张到第二张,还是第一张到最后一张)。

    ⑥触及轮播图区域和离开该区域时

        parent.onmouseover = function(){
            clearInterval(timer);
            buttons.style.display = 'block';
        }
        parent.onmouseout = function(){
            timer = setInterval(autoRun, gap);
            buttons.style.display = 'none';
        }
    

    触及区域,清除定时器,显示按钮。
    离开区域,添加定时器,隐藏按钮。

    ⑦给两个按钮添加onclick事件

        /*上一张*/
        buttons.children[0].onclick = function(){ 
            picN--;
            cirN--;
            if(picN < 0){                               //滚动完第一项后
                img_ul.style.left = -len*width + "px";  //改变left至克隆的第一项处
                picN = cirN = len-1;
            }
            Roll(-picN*width);
            //bug处理
            if(cirN < 0){
                cirN = len-1;
            }
            for(var i=0; i<len; i++){
                cLis[i].className = "quiet";
            }
            cLis[cirN].className = "active";
        }
        /*下一张*/
        buttons.children[1].onclick = autoRun;
    

    自动播放就是间隔一定时间不断调用函数“下一张”的过程,所以这里的按钮right下一张的实现就是上面的autoRun函数。

    以上就是轮播图各部分的实现原理,如果你有其他的方法,欢迎一起交流!
    2019.3.30更新:
    用requestAnimationFrame()实现一个轮播图

    相关文章

      网友评论

        本文标题:简单轮播图的实现及原理讲解(js)

        本文链接:https://www.haomeiwen.com/subject/aodctqtx.html