图片的上下页切换
<script type="text/javascript">
window.onload = function(){
var prev = document.getElementById("prev");
var next = document.getElementById("next");
// alert("上一张");
// 获取到一个数组 我们可以确定只有一个img标签[0]获取第一个img标签
var img = document.getElementsByTagName("img")[0];
var imgArray = ["image/01.jpg","image/02.jpg","image/03.jpg","image/04.jpg","image/05.jpg"];
// 创建一个变量,来保存当前正在显示的图片的索引
var index = 0;
// 设置提示文字
var info = document.getElementById("info");
info.innerHTML = "一共"+imgArray.length+"张图片 当前第"+(index + 1)+"张";
prev.onclick = function(){
/*
切换到上一张,索引自减
*/
index--;
if(index < 0){
index = imgArray.length - 1;
}
img.src = imgArray[index];
info.innerHTML = "一共"+imgArray.length+"张图片 当前第"+(index + 1)+"张";
};
next.onclick = function(){
// alert("下一张");
/*
切换到下一张,索引自增
*/
index++;
if(index > imgArray.length - 1){
index = 0;
}
img.src = imgArray[index];
info.innerHTML = "一共"+imgArray.length+"张图片 当前第"+(index + 1)+"张";
};
}
</script>