方法一:
<script> var curIndex=0;//时间间隔(单位毫秒),每秒钟显示一张,数组共有5张图片放在Photos文件夹下。 var timeInterval=1000; var arr=new Array(); arr[0]="images/1.jpg"; arr[1]="images/2.jpg"; arr[2]="images/3.jpg"; arr[3]="images/4.jpg"; setInterval(changeImg,timeInterval); function changeImg() { var obj=document.getElementById("obj"); if (curIndex==arr.length-1) { curIndex=0; } else { curIndex+=1; } obj.src=arr[curIndex]; } </script> <center> <img id=obj src =arr[curIndex] border =0> </center>
方法二:
</div> <div style="float:left; 60%; height: 1500px; "> <ul id="img"style="width : 100%; height : 500px;"> <li><img src="images/1.jpg"></li> <li><img src="images/2.jpg"></li> <li><img src="images/3.jpg"></li> <li><img src="images/4.jpg"></li> </ul> </div> <script type="text/javascript"> (function () { var i = 0; var $ = function (ID) { return document.getElementById(ID); }; var timer = null, speed = 1000; $("img").getElementsByTagName("li")[0].style.display = "block"; (function () { if (i >= $("img").getElementsByTagName("li").length) { for (var j = 0; j < $("img").getElementsByTagName("li").length; j++) { $("img").getElementsByTagName("li")[j].style.display = "none"; } i = 1; $("img").getElementsByTagName("li")[0].style.display = "block"; } else { for (var j = 0; j < $("img").getElementsByTagName("li").length; j++) { //console.log(j+""+i); if (j === i) { $("img").getElementsByTagName("li")[j].style.display = "block"; } else { $("img").getElementsByTagName("li")[j].style.display = "none"; } } i++; } timer = setTimeout(arguments.callee, speed); })(); })(); </script>