js设置定时器（setInterval）并定时切换图片

最新推荐文章于 2022-12-16 15:24:29 发布

原创最新推荐文章于 2022-12-16 15:24:29 发布 · 5.7k 阅读

13 ·

CC 4.0 BY-SA版权

JavaScript 专栏收录该内容

30 篇文章

订阅专栏

本文介绍了一种使用HTML和JavaScript实现轮播图的方法。通过设置图片数组和使用setInterval函数，实现了图片的自动切换效果。每2秒更换一张图片，展示了如何在网页中动态加载和显示图片。

html代码

<img id="image" src="" alt="" srcset="" width="50px" height="50px">

js代码

    var curIndex=0;//当前下标
    var arr=new Array();//图片数组
    arr[0]="https://i.52112.com/icon/jpg/256/20190902/56656/2524979.jpg";//图片路径
    arr[1]="https://i.52112.com/icon/jpg/256/20190902/56656/2524966.jpg";
    setInterval(function(){
    var obj=document.getElementById("image");
    if (curIndex==arr.length-1){
        curIndex=0;
    }else{
        curIndex+=1;
    }
    obj.src=arr[curIndex];
    },2000);