1.JS代码
<script type="text/javascript">
window.onload=function(){
//获取img标签
var img=document.getElementsByTagName("img")[0];
//创建一个数组,用来保存图片的路径
var imgArr=["img/1.jpg","img/2.jpg","img/3.jpg","img/4.jpg","img/5.jpg"];
//创建一个变量,来保存当前正在显示的图片的索引
var index=0;
//获取两个按钮
var pre=document.getElementById("pre");
var next=document.getElementById("next");
pre.onclick=function(){
index--;
//判断index是否小于0
if(index<0){
index=imgArr.length-1;
}
img.src=imgArr[index];
//设置提示文字
//获取id=info的p 元素
var info =document.getElementById("info");
info.innerHTML="一共"+imgArr.length+"张图片,当前第"+(index+1)+"张";
};
next.onclick=function(){
/*
切换到下一张是index自增*/
index++;
if(index>imgArr.length-1){
index=0;
}
//切换图片就是需改img的src属性
//要修改一个元素的属性 元素.属性=属性值
img.src=imgArr[index];
//设置提示文字
//获取id=info的p 元素
var info =document.getElementById("info");
info.innerHTML="一共"+imgArr.length+"张图片,当前第"+(index+1)+"张";
};
};
</script>
2.HTML代码
<body>
<div id="outer">
<p id="info"></p>
<img src="img/1.jpg"/>
<button id="pre" >上一张</button>
<button id="next" >下一张</button>
</div>
</body>
3.CSS代码
<style type="text/css">
*{
margin: 0;
padding:0;
}
#outer{
width: 410x;
height:500px;
margin: 0 auto;
padding: 0px;
background-color: greenyellow;
text-align: center;
}
img{
width: 400px;
height: 500px;
}
</style>
学了setInterval()之后
1.HTML
<img id="img1"src="img/1.jpg" style="width: 270px;height: 360px;"/>
<br/><br/>
<button id="btn01">开始</button>
<button id="btn02">暂停</button>
2.JS代码
window.onload=function(){
/*
使图片可以自动切换
*/
//获取img标签
var img=document.getElementById("img1");
//创建一个数组
var imgArr=["img/1.jpg","img/2.jpg","img/3.jpg","img/4.jpg","img/5.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属性
img.src=imgArr[index];
}, 700);
}
var btn02=document.getElementById("btn02");
//为btn02绑定一个单击响应函数
btn02.onclick=function(){
//点击按钮后,停止图片的自动切换,关闭定时器
/*
clearInterval()可以接受任意参数
如果参数是一个有效的定时器的标识,则停止对应的定时器
如果参数不是一个有效的定时器,则什么也不做
*/
; clearInterval(timer);
};
};