知识点
定义一个函数：为指定元素绑定单击响应事件
function myClick(idStr,fun){
var btn = document.getElementById(idStr);
btn.onclick = fun;
};
代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
body{
/* div 居中 */
text-align: center;
}
#box1{
width: 200px;
height: 300px;
/* div 居中 */
margin: 0 auto;
background-color: pink;
}
img{
width: 100%;
height: 100%;
}
</style>
<script type="text/javascript">
window.onload = function(){
// 创建数组：保存图片的路径
var imgArr = ["img01.JPG","img02.JPG","img03.JPG","img04.JPG"];
// 获取"img"标签
var img = document.getElementsByTagName("img")[0];
// 定义一个变量：保存当前图片的索引
var index = 0;
// 设置提示文字
var info = document.getElementById("info");
info.innerHTML = "第" + (index+1) + "张";
// 定义一个函数：为指定元素绑定单击响应事件
function myClick(idStr,fun){
var btn = document.getElementById(idStr);
btn.onclick = fun;
};
// 创建"上一张"按钮事件
myClick("pre",function(){
// 点击按钮，索引值减一
index--;
// 当索引值 < 0时回到最后一张图片
if(index < 0){
index = imgArr.length - 1;
}
// 修改图片路径
img.src = imgArr[index];
// 修改提示文字
info.innerHTML = "第" + (index+1) + "张";
});
// 创建"下一张"按钮事件
myClick("next",function(){
// 点击按钮，索引值减一
index++;
// 当索引值 >= 数组长度，回到第一张图片
if(index >= imgArr.length){
index = 0;
}
img.src = imgArr[index];
info.innerHTML = "第" + (index+1) + "张";
});
};
</script>
</script>
</head>
<body>
<div id="box1">
<p id="info"></p>
<img src="img01.JPG" alt="" id="img01">
<button id="pre">上一张</button>
<button id="next">下一张</button>
</div>
</body>
</html>
