点击右键头换到下一张图片html,js实现点击切换图片（用于轮播图的点击箭头开始切换）...

/*

*实现点击按钮切换

*/

window.onload = function() { //确保整个事件在页面加载完成之后执行

var btn1 = document.getElementById("btn1");

var btn2 = document.getElementById("btn2");

var img = document.getElementsByTagName("img")[0];

var imgArr = ["img/d4a5a51676c1f82855d63a4fc0b069ed.jpg ",

"img/83610107838ee51e9eb29685ba9b44b6.jpg ",

"img/e52c3e98602b90f198ec316dce253cba.jpg ",

"img/972fe1db817a46fc5c461337bf94d20f.jpg ",

];

var index = 0;

var info = document.getElementsByName("info");

btn1.onclick = function() {

index--;

if (index 

index = imgArr.length - 1;

}

info.innerHTML = "一共有" + index + "张,现在是第" + (index + 1) + "张";

img.src = imgArr[index];

}

btn2.onclick = function() {

index++;

if (index > imgArr.length - 1) {

index = 0;

}

info.innerHTML = "一共有" + index + "张,现在是第" + (index + 1) + "张";

img.src = imgArr[index];

}

};

* {

margin: 0px;

padding: 0px;

}

.pic {

width: 2450px;

height: 1000px;

margin: 100px auto;

padding: 30px;

background-color: seagreen;

overflow: hidden;

}

button {

width: 200px;

text-align: center;

}

上一张

下一张