利用函数递归实现简单的轮播图效果

时间 2019-11-13

原文原文链接

利用递归实现简单的轮播图效果

对于初学者而言，提到轮播图，首先想到到的是利用for循环和定时器来实现图片的循环播放，可是实践证实，在for循环中使用定时器并不能实现图片之间的过分和图片的循环播放。那么轮播图该怎样实现呢？
在js中，递归实际也是一种循环，并且若是不设置限制条件，递归是一个死循环。
递归函数就是在函数内部调用函数自身。
下面就用递归函数作一个简单的轮播图。css

首先建立一个html文件，引入几张图片

最后一张和第一张图片是同样的，是为了更好地显示过渡的效果html

<body>
    <div class="box">
        <ul id="list">
            <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>
            <li><img src="imgs/5.jpg"></li>
            <li><img src="imgs/6.jpg"></li>
            <li><img src="imgs/7.jpg"></li>
            <li><img src="imgs/1.jpg"></li>
        </ul>
    </div>
</body>

设置一下基本样式

.box{
    width: 600px;
    height: 320px;
    border: 2px solid red;
    margin:20px auto;
    overflow: hidden;
}

/* 调整li尺寸与显示框相同大小，并让li横向并排显示 */
.box ul{
    width: 4800px;
    position: relative;
    left:0px;
}
.box ul li{
    float: left;
    width: 600px;
    height: 320px;
    background-color: aqua;
}

/* li中图片大小与li窗口大小一致 */

#list li img{
    width: 600px;
    height: 320px;
}

下面来写js

我是将函数进行了封装，已便后期重复使用。
下面是函数使用的参数：函数

move 一次性移动的距离（有正负之分）
yctime 延迟时间（单位：毫秒）
gdTime 过分时间（单位：秒）
num 表示li的个数

// 获取ul标签
    var list = document.getElementById("list");
// 获取li标签的宽度（每一次须要移动的距离）
    var oLi = list.children;
    var oLiMove = oLi[0].scrollWidth;
    var num = oLi.length;
    
// 建立函数
function oMove(move,num,yctime,gdTime){ 
    // 设定ul的相对行为初始值
    list.style.transition =0 + "s";
    list.style.left = 0 + "px";
    var a = 0;
        function omove(){
            a = a - Number(move);
            console.log(a)
            list.style.transition =0.8 + "s";
            list.style.left = a + "px";
                    
            if(a <= -move * num)    {
                clearInterval(setIn);
                // 递归函数
                oMove(move,num,yctime,gdTime);
            }   
        }
        // 插入时间贞
        var setIn = setInterval(omove,yctime);
        // 设置悬停（鼠标悬浮事件）
        list.onmouseover = function(){
            clearInterval(setIn);
            console.log(1);   
        }
        // 设置移除开始循环
        list.onmouseout = function(){
            setIn = setInterval(omove,yctime);   
            console.log(2);
        }           
}
oMove(oLiMove,num,2000,0.8);

整个函数是一个封装的函数，传入对应的参数即可直接使用。code

须要注意的点：当设置条件中止循环或者从新启动循环时，（以鼠标悬浮为例）当鼠标移出是，让循环继续，就必须给setIn从新赋值，不然setIn和鼠标移除事件函数中的循环同时发生，就会出现多个循环同时进行，致使图片混乱。htm

下面使用的一点编写思路，仅供参考：递归

需求分析：

图片间隔1S自动循环播放.
鼠标放在上面时播放中止 .

思路：

经过ul的相对位置的循环移动，实现图片展现效果的循环.seo

建立函数.
设定ul的初始位置，引入参数来储存移动距离
建立函数，设置ul的移动，并将其转换成ul的相对定位
插入时间贞，让omove每隔1s执行一次
函数中设置中止条件，当最后一个图中展现完成时结束循环，并开始下一轮循环

所用知识点：
定时器：setInterval()，解除定时 clearInterval，递归函数事件

但愿本段分享能够给你们带来帮助，欢迎你们提出意见和建议。谢谢！图片