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

冷不防 2022-01-30 16:27 140阅读 0赞

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

首先创建一个html文件，引入几张图片  
最后一张和第一张图片是一样的，是为了更好地显示过渡的效果

设置一下基本样式

.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);

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

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

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

需求分析：  
图片间隔1S自动循环播放.  
鼠标放在上面时播放停止 .  
思路：  
通过ul的相对位置的循环移动，实现图片展示效果的循环.

创建函数.  
设定ul的初始位置，引入参数来储存移动距离  
创建函数，设置ul的移动，并将其转换成ul的相对定位  
插入时间贞，让omove每隔1s执行一次  
函数中设置停止条件，当最后一个图中展示完成时结束循环，并开始下一轮循环  
所用知识点：  
定时器：setInterval()，解除定时 clearInterval，递归函数

希望本段分享可以给大家带来帮助，欢迎大家提出意见和建议。谢谢