数组创建无限循环的轮播图

最新推荐文章于 2022-10-13 17:56:18 发布

'马赛克'

最新推荐文章于 2022-10-13 17:56:18 发布

阅读量2.5k

点赞数 6

分类专栏：技术文献文章标签：数组创建轮播图设定时间的无限轮播

本文链接：https://blog.csdn.net/weixin_44540436/article/details/86541779

版权

技术文献专栏收录该内容

30 篇文章 0 订阅

订阅专栏

数组创建无限循环的轮播

1. 加载事件防止刷新时第一张是空白板
如果没有这一段代码，一进来或者刷新，出现第一张相片都是空白板
代码如下：

<body> 
//加载事件  ---- 防止刷新第一张是空白板
  window.onload = function () {      
      changeImg1();//调用body相片的方法
  }

2. 创建数组，在数组里存放五张相片
代码如下：

 <script type="text/javascript"> 
      var curIndex1 = 0; //相片的索引从0开始   
      var timeInterval1 = 3000;//时间间隔(单位毫秒)，每隔3000毫秒进行下一张相片显示
      //定义一个存放照片位置的数组，可以放任意个，在这里放4个
      var arr = new Array();
      arr[0] = "'~/../../Content/img/9619575ff09bcd62a0dc9545c9730879.jpg'";//第一张相片索引值为0
      arr[1] = "'~/../../Content/img/c5fd1dea498565c64259503398bc5483.jpg'";//第二张相片索引值为1
      arr[2] = "'~/../../Content/img/504caf822354abcc15c014e91d4ecaf3.jpeg'";//第三张相片索引值为2
      arr[3] = "'~/../../Content/img/91db1d4921f9395174bd3e641b95d395.jpg'";//第四张相片索引值为3
      arr[4] = "'~/../../Content/img/09833464b9b1218ee587ba86bfc0fe88.jpg'";//第五张相片索引值为4
      //setInterval 创建一个定时器，参数是("调用函数"，时间(单位毫秒)),执行这条语句的时候每隔设定的时间调用一次函数，通常用在定时弹出广告这方面。
      setInterval(changeImg1, timeInterval1);
      function changeImg1() {
      if (curIndex1 == arr.length -1) {//相片索引值等于数组长度-1时，（4=5-1）相片就会从第一张开始显示
      curIndex1 =0;//相片索引值就等于0
      } else {
      curIndex1 += 1;//否则相片的索引值加1，相片跳到下一张显示
      }
      //设置body的背景图片
      document.body.style.backgroundImage = "URL("+arr[curIndex1]+")";//显示对应的图片
 }
</script>
</body>

'马赛克'

关注

6
点赞
踩
2

收藏

觉得还不错? 一键收藏
4
评论
数组创建无限循环的轮播图

数组创建无限循环的轮播1. 加载事件防止刷新时第一张是空白板如果没有这一段代码，一进来或者刷新，出现第一张相片都是空白板代码如下：&lt;body&gt; //加载事件 ---- 防止刷新第一张是空白板 window.onload = function () { changeImg1();//调用body相片的方法 }2. 创建数组，在数组里存放...
复制链接

扫一扫