<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#img1{
width: 300px;
height: 500px;
}
</style>
<script type="text/javascript">
window.onload = function(){
/*
* 是图片自动切换
*/
//获取img标签
var img1 = document.getElementById("img1");
//创建一个数组保存图片的路径
var imgArr = ["img/k1.jpg","img/k2.jpg","img/k3.jpg","img/k4.jpg","img/k5.jpg","img/k6.jpg"];
//创建一个变量，用来保存当前图片的索引
var index = 0;
//定义一个变量用来保存定时器的值
var timer;
//为btn01绑定一个单选函数
var btn01 = document.getElementById("btn01");
btn01.onclick = function(){
/*
* 目前，我们每点击一次按钮，就会开启一个定时器
* 点击多次就会开启多个定时器，这就导致图片的切换速度过程快
* 并且我们只能关闭最后一次开启的定时器
*/
//在开启定时器之间前，需要将前元素上的其他定时器关闭
clearInterval(timer);
/*
* 开启定时器，自动切换图片
*/
timer = setInterval(function(){
//使索引自增
index++;
//判断是否超过最大索引
/*if(index >= imgArr.length){
index = 0;
}*/
index = index % imgArr.length;
//修改img1的src属性
img1.src = imgArr[index];
},2000);
};
//为btn02绑定一个单击响应函数
var btn02 = document.getElementById("btn02");
btn02.onclick = function(){
//点击被按钮以后，停止图片的自动切换，关闭定时器
/*
* clearIntervar()可以接收任意参数
* 如果参数是一个有效的定时器的标识，则停止对应的定时器
* 如果参数不是一个有效的标识，则什么也不做
*
*/
clearInterval(timer);
};
};
</script>
</head>
<body>
<div align="center">
<img id="img1" src="img/k1.jpg"/><br />
<button id="btn01">ready go</button>
<button id="btn02">stop</button>
</div>
</body>
</html>
211
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
