<body>
<div>
<img src="img/1.jpg" id="lunbo_img" width="500px" height="400px">
<button onclick="img_next()">下一张</button>
<button onclick="img_auto()">自动播放</button>
<button onclick="img_stop()">停止播放</button>
</div>
</body>
<script type="text/javascript">
var i=1;//必须从1开始,如果从0开始,将会重复播放一次第一张图片
function img_next(){
//定义一个图片的数组,
var imgs=["img/1.jpg","img/2.jpg","img/3.jpg","img/4.jpg"];
//获取图片播放的位置
var img=document.getElementById("lunbo_img");
//根据id找到src属性,并将第i张图片赋值给src
img.src=imgs[i];
i++;
//如果播放完最后一张图片后,重新播放第一张图片
if (i == 4) {
i=0;
}
}
var interval="";
function img_auto(){
//无限调用img_next方法就可以实现自动循环播放
//设置时间间隔
interval=setInterval("img_next()",1000);
}
function img_stop(){
//如果interval不为空,也就是在调用其他方法或者执行内容时,清空时间间隔
if(interval!=""){
clearInterval(interval);
}
}
</script>
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
