<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script type="text/javascript">
//onload页面加载完成之后再执行
window.onload= function (){
/*
* 点击按钮切换图片
*/
//获取按钮
var one = document.getElementById('one');
var two = document.getElementById('two');
/*
* 切换图片就是要更改src属性
*/
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;
/*
* 获取info
*/
var info = document.getElementById('info');
one.onclick = function (){
/*
* 切换上一张自减
*/
index--;
if(index<0){
index=imgArr.length-1;
}
img.src=imgArr[index];
info.innerHTML='一共'+imgArr.length+'张图片'+'当前'+(index+1)+'张';
}
two.onclick = function (){
index++;
if(index>imgArr.length-1){
index=0;
}
img.src=imgArr[index];
info.innerHTML='一共'+imgArr.length+'张图片'+'当前'+(index+1)+'张';
}
}
</script>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
.box{
500px;
margin:10px auto;
padding: 10px;
background-color: aquamarine;
text-align: center;
}
</style>
</head>
<body>
<div class="box">
<p id="info"></p>
<img src="img/1.jpg" />
<button id="one" >上一张</button>
<button id="two" >下一张</button>
</div>
</body>
</html>