JS实现定时轮播图效果

JS实现定时轮播图效果

使用超级简单的代码实现轮播图

html部分

<ul class="list">
            <li><img id="imgs" class="item" src="images/img1.JPG" alt=""></li>
        </ul>

如上图，建立一个ul列表，并带一个li放img图片（为什么是一个li呢，其他的待会在js部分使用循环渲染出来，简单又快捷）。

js部分

var index = 1;
function lb(){
    
    
    index++;
    if(index>4){
    
    
        index=1;
    }
    var img = document.getElementById("imgs");
    img.src = "images/"+index+".JPG";
}
setInterval(lb,2000)

定义index

轮播事件要用到的变量；

定义函数

定义一个lb()函数，使用if语句实现判断当前index的值，进而执行

定义img

获取图片的id，定义一个变量img获取图片所在元素的id，再用id.src写出当前index的图片位置即可（图片的命名要用阿拉伯数字，进行命名，方便函数的执行；图片的格式要统一！）

最后一步（实现轮播）

使用setInterval函数实现定时，可按照指定的周期（以毫秒计）来调用函数或计算表达式。

以上就是实现轮播图的具体步骤啦！是目前我觉得最简单的一种方式！