简单轮播图的实现及原理讲解（js）

Posted 2023-04-25

参考技术A

三个div，最外层id为 parent 的大div内包含了 uls 和 buttons 两个div，div uls 中包含了两个列表 img_ul （图片列表）, litCir_ul （小圆点列表），div buttons 里则包含了“左”， “右”两个按钮。

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

默认 li 的 class 为 quiet , 第一张默认为 active 。

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

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

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

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

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

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

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

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

使用JS实现轮播图的效果

其中的一些css样式代码就省略了，下面只把结构层html、行为层js的代码展示出来 ，看代码说事。

一、简单的轮播图

<div class="box" id="box">
    <div class="inner">
        <ul>
            <li><a href="#"><img src="images/01.jpg" alt=""/></a></li>
            <li><a href="#"><img src="images/02.jpg" alt=""/></a></li>
            <li><a href="#"><img src="images/03.jpg" alt=""/></a></li>
            <li><a href="#"><img src="images/04.jpg" alt=""/></a></li>
            <li><a href="#"><img src="images/05.jpg" alt=""/></a></li>
        </ul>
        <div class="square">
            <span class="current">1</span>
            <span>2</span>
            <span>3</span>
            <span>4</span>
            <span>5</span>
        </div>
    </div>
</div>

 

<script>
    //获得要操作的对象
    var box = document.getElementById("box");
    var inner = box.children[0];
    var ul = inner.children[0];
    var square = inner.children[1];
    var spans = square.children;     //所有的字级元素
    var imgWidth = inner.offsetWidth;


    //循环遍历span标签
    for(var i=0;i<spans.length;i++){
        spans[i].index = i;
        spans[i].onmouseover = function(){
            for(var j=0;j<spans.length;j++){
                spans[j].className = "";
            }
            this.className = "current";
            var target = -imgWidth*this.index;
            sports(ul,target);
        }
    }



    //运动函数的封装
    function sports(obj,target){
        clearInterval(obj.timeId);  //，每次点击时先清空计时器
        obj.timeId =  setInterval(function(){
            var step =10;
            var leader = obj.offsetLeft;  //先获得当前的距离左侧的位置
//
            step = leader<target?step:-step;

            if(Math.abs(leader-target) > Math.abs(step)){
                leader = leader+step;
                obj.style.left = leader + "px";
            }else{
                clearInterval(obj.timeId);  //清除计时器
                obj.style.left = target+"px";
            }
        },10);
    }
</script>

 

二、左右焦点轮播图

 

<div id="box" class="all">
    <div class="ad">
        <ul id="imgs">
            <li><img src="images/1.jpg" alt=""/></li>
            <li><img src="images/2.jpg" alt=""/></li>
            <li><img src="images/3.jpg" alt=""/></li>
            <li><img src="images/4.jpg" alt=""/></li>
            <li><img src="images/5.jpg" alt=""/></li>
        </ul>
    </div>
    <div id="arr">
        <span id="left">&lt;</span>
        <span id="right">&gt;</span>
    </div>
</div>

 

 

 

<script>
    //获取要操作对象
    var box = document.getElementById("box");
    var ad  = box.children[0];
    var ul = document.getElementById("imgs");
    var arr = document.getElementById("arr");
    var arrLeft = document.getElementById("left");
    var arrRight = document.getElementById("right");
    var imgWidth = ad.offsetWidth;
    var lis = ul.children;

    //鼠标移入大盒子时显示按钮
    box.onmouseover = function(){
        arr.style.display ="block";
    }
    box.onmouseout = function(){
        arr.style.display = "none";  //鼠标离开大盒子时隐藏按钮
    }

    //给左右按钮注册单击事件
    var pic=0;  //重新定义一个变量，来标识图片的个数或索引
    arrRight.onclick = function(){
        if(pic<lis.length-1){
            pic++;
        }
        var target = -imgWidth*pic;
        sports(ul,target);
    }
    arrLeft.onclick =function(){
        if(pic>0){
            pic--;
        }
        var target = -imgWidth*pic;
        sports(ul,target);
    }



    //运动函数的封装
    function sports(obj,target){
        clearInterval(obj.timeId);  //，每次点击时先清空计时器
        obj.timeId =  setInterval(function(){
            var step =10;
            var leader = obj.offsetLeft;  //先获得当前的距离左侧的位置
//
            step = leader<target?step:-step;

            if(Math.abs(leader-target) > Math.abs(step)){
                leader = leader+step;
                obj.style.left = leader + "px";
            }else{
                clearInterval(obj.timeId);  //清除计时器
                obj.style.left = target+"px";
            }
        },10);
    }
</script>

 

三、无缝滚动原理轮播图

 

<div class="box" id="screen">
    <ul>
        <li><img src="images/01.jpg" alt=""/></li>
        <li><img src="images/02.jpg" alt=""/></li>
        <li><img src="images/03.jpg" alt=""/></li>
        <li><img src="images/04.jpg" alt=""/></li>
        <li><img src="images/01.jpg" alt=""/></li>
    </ul>
</div>

 

 

 

<script>
    //获得要操作的对象
    var box = document.getElementById("screen");
    var ul = box.children[0];
    var lis = ul.children;
    var imgWidth = ul.offsetWidth;
    var timeId =null;

//    timeId = setInterval(function(){
//        var leader = ul.offsetLeft;
//        var step = -10;
//        if(leader>-1200){
//            leader = leader + step;
//            ul.style.left = leader + ‘px‘;
//        }else{
//            ul.style.left = "0px";
//        }
//    },60)
    timeId = setInterval(play,60);

    //鼠标移入大盒子时，清除计时器
    box.onmouseover = function(){
        clearInterval(timeId);
    }
    //鼠标离开大盒子时，重新开启计时器
    box.onmouseout = function(){
//        timeId = setInterval(function(){
//            var leader = ul.offsetLeft;
//            var step = -10;
//            leader = leader + step;
//            ul.style.left = leader + ‘px‘;
//        },60)
        timeId = setInterval(play,60);
    }

    //封装函数
    function play(){
        var leader = ul.offsetLeft;
        var step = -10;
        if(leader>-1200){
            leader= leader + step;
            ul.style.left = leader + ‘px‘;
        }else{
            ul.style.left = "0px";
        }
    }


</script>

四、完整的轮播图

 

<div id="box" class="all" >
    <div class="ad">
        <ul id="imgs">
            <li><img src="images/1.jpg" width=‘500‘ height=‘200‘ alt=""/></li>
            <li><img src="images/2.jpg" width=‘500‘ height=‘200‘ alt=""/></li>
            <li><img src="images/3.jpg" width=‘500‘ height=‘200‘ alt=""/></li>
            <li><img src="images/4.jpg" width=‘500‘ height=‘200‘ alt=""/></li>
            <li><img src="images/5.jpg" width=‘500‘ height=‘200‘ alt=""/></li>
        </ul>
        <ol></ol>
    </div>
    <div id="arr">
        <span id="left">&lt;</span>
        <span id="right">&gt;</span>
    </div>
</div>

 

 

 

 

/**
 * Created by Administrator on 2016/8/25.
 */
/**
 * 封装了一个匀速运动函数
 * @param obj
 * @param target
 */
function animate(obj,target){
    clearInterval(obj.timerId);
    obj.timerId = setInterval(function(){
        var leader = obj.offsetLeft;
        var step = 10;
        step = leader<target?step:-step;
        if(Math.abs(leader-target) > Math.abs(step)){
            leader = leader + step;
            obj.style.left = leader + ‘px‘;
        }else{
            clearInterval(obj.timerId);
            obj.style.left = target + ‘px‘;
        }
    },15)
}


/**
 * 封装了一个滚动函数
 */
function play(){
    var leader = ul.offsetLeft;
    var step = -10;
    if(leader>=-1200){
        leader = leader + step;
        ul.style.left = leader + ‘px‘;
    }else{
        ul.style.left = "0px";
    }
}

 

 

 

<script src="common.js"></script>
<script>
    // 1. 先获取要操作的对象
    var box = document.getElementById("box");
    var ad = box.children[0];
    var ul = document.getElementById("imgs");
    var lis = ul.children;
    var ol = ad.children[1];
    var arr = document.getElementById("arr");
    var arrLeft = document.getElementById("left");
    var arrRight = document.getElementById("right");
    var imgWidth = ad.offsetWidth;

    var timerId = null;
    // 2. 根据图片的个数动态的生成小按钮
    for(var i=0;i<lis.length;i++){
        var li = document.createElement("li");
        li.innerHTML = i+1;
        ol.appendChild(li);
    }

    // 3. 获得所有的ol下的li，然后让第一个变成黄色
    var olLis = ol.children;
    olLis[0].className = "current";

    // 4. 当鼠标移入的时候，对应的小方块显示出来
    for(var j=0;j<olLis.length;j++){
        olLis[j].index = j;
        olLis[j].onmouseover = function(){
            for(var k=0; k<olLis.length;k++){
                olLis[k].className = "";
            }
            this.className = "current";
            var target = -imgWidth*this.index;// 5. 让图片移动对应的小方块索引的图片宽度的距离  如果小方块的索引为0，则让ul移动0个图片的距离
            animate(ul,target);                //如果小方块的索引为1，就让ul移动1个图片宽度的距离
            //让三者的显示状态同步或是统一起来
            pic = square=this.index;   //让三者的索引值统一起来
        }
    }

    // 6. 鼠标移入的时候，显示左右按钮并注册点击事件
    box.onmouseover = function(){
        arr.style.display = "block";
        clearInterval(timerId);   //清除定时器
    }
    box.onmouseout = function(){
        arr.style.display = "";
        timerId = setInterval(playNext,1000);
    }

    // 8. 动态添加第一张图片到最后的位置
    var imgFirst = lis[0].cloneNode(true);
    ul.appendChild(imgFirst);


    // 7. 给左右按钮注册点击事件
    var pic=0;   //定义一个变量来表示移动的图片个数 也相当于索引
    var square =0;   //默认显示的小方块的索引
    arrRight.onclick = function(){
//        if(pic==lis.length-1){
//            pic=0;   //迅速的让索引编号 等于0
//            ul.style.left = "0px";  // 让ul快速的恢复成原来的位置
//        }
//        pic++;
//        var target = -imgWidth*pic;
//        sports(ul,target);
//
//        if(square<olLis.length-1){
//            square++;
//        }else{
//            square=0;
//        }
//        for(var i=0;i<olLis.length;i++){
//            olLis[i].className = ""; //将ol下的其它的小方块的颜色全部清除
//        }
//        olLis[square].className = "current";
        playNext();
    }

    arrLeft.onclick =function(){
        if(pic==0){
            pic=lis.length-1;
            ul.style.left = -imgWidth*pic + "px";
        }
        pic--;
        var target = -imgWidth*pic;
        animate(ul,target);
        if(square>0){
            square--;
        }else{
            square = olLis.length-1
        }
        for(var i=0;i<olLis.length;i++){
            olLis[i].className = ""; //将ol下的其它的小方块的颜色全部清除
        }
        olLis[square].className = "current";
    }


    //添加自动轮播功能
    timerId = setInterval(playNext,1000);

    function playNext(){
        if(pic==lis.length-1){
            pic=0;   //迅速的让索引编号 等于0
            ul.style.left = "0px";  // 让ul快速的恢复成原来的位置
        }
        pic++;
        var target = -imgWidth*pic;
        animate(ul,target);
        if(square<olLis.length-1){
            square++;
        }else{
            square=0;
        }
        for(var i=0;i<olLis.length;i++){
            olLis[i].className = ""; //将ol下的其它的小方块的颜色全部清除
        }
        olLis[square].className = "current";
    }

</script>