JS_实现图片的自动轮播

最新推荐文章于 2024-01-02 07:57:02 发布

chengqinzhi5893

最新推荐文章于 2024-01-02 07:57:02 发布

阅读量366

点赞数

原文链接：https://my.oschina.net/microlv/blog/848968

版权

最终效果如图所示：

(个人方法）
实现思路：
利用setInterval()，在一段间隔时间内，反复执行函数。函数为html中img标签的src属性修改值，分别为要轮播图片的路径。
html代码：
<html>
<head>
<title></title>
</head>
<body>
<img id="lunbo">
</body>
</html>
JS代码：
window.οnlοad=function(){
      var img=document.getElementById("lunbo");
var pics=["images/lunbo/1.png","images/lunbo/2.png","images/lunbo/3.png","images/lunbo/4.png"];      //将图片路径的字符串保存在数组中，方便函数访问获取。
      var i=1;
      img.src=pics[0];
      setInterval(function(){
                  if(i>=pics.length) i=0          //由于要循环轮播图片，所以当i的值等于数组长度时就应该回到开始，显示第一张图片
                  img.src=pics[i];
                    i++;
            },3000);
    }

测试环境： IE11、chrome 56.0.2914.87(64bit)、safari 5.1.7(7534.57.2)