首页 > PHP资讯 > HTML5培训技术 > 基于javascript数组实现图片轮播_javascript技巧

基于javascript数组实现图片轮播_javascript技巧

HTML5培训技术
图片轮播的办法有多种,在这里介绍一种简单的:js数组实现。

首先将图片路径存储在数组中,然后再调用setInterval函数来依次轮播图片

 <script type="text/javascript">   var curIndex = 0;   var timeInterval = 1000;   var arr = new Array();   arr[0] = "1.png";   arr[1] = "2.png";   arr[2] = "3.png";   arr[3] = "4.png";   arr[4] = "5.png";   setInterval(changeImg,timeInterval);   function changeImg() {     var obj = document.getElementById("imge");     if (curIndex == arr.length-1) {      curIndex = 0;     } else {      curIndex += 1;     }     obj.src = arr[curIndex];   }  《script》

完整实例如下

      使用数组实现图片自动轮播   <script type="text/javascript">   var curIndex = 0;   var timeInterval = 1000;   var arr = new Array();   arr[0] = "1.png";   arr[1] = "2.png";   arr[2] = "3.png";   arr[3] = "4.png";   arr[4] = "5.png";   setInterval(changeImg,timeInterval);   function changeImg() {     var obj = document.getElementById("imge");     if (curIndex == arr.length-1) {      curIndex = 0;     } else {      curIndex += 1;     }     obj.src = arr[curIndex];   }  《script》    

使用数组实现图片自动轮播

以上就是本文的全部内容,希望对大家的学习有所帮助。

HTML5培训技术

本文由欣才IT学院整理发布,未经许可,禁止转载。
支持7不支持0