1.先判断事件
点击按钮转换图片,那么需要通过id获取按钮
var prev = document.getElementById("prev");
var next = document.getElementById("next");
变量的设置
// 注意如果不加索引的话,这里获取到的是一个集合,但是操作的对象应该是元素,所以要加上索引
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 info = document.getElementById("info");
info.innerHTML = "一共"+imgArr.length+"张图片,现在是"+(index+1)+"张";
给按钮绑定单击响应函数
prev.onclick = function(){
index--;
//第一个返回最后一个
if(index < 0){
index = imgArr.length - 1;
}
//修改图片路径
img.src = imgArr[index];
info.innerHTML = "一共"+imgArr.length+"张图片,现在是"+(index+1)+"张";
}
next.onclick = function(){
index++;
if(index > imgArr.length - 1){
index = 0;
}
img.src = imgArr[index];
info.innerHTML = "一共"+imgArr.length+"张图片,现在是"+(index+1)+"张";
}
}