html语言点击按钮切换图片,使用js实现点击按钮切换图片

var pic = [

'image/imgChange/1.jpg',

'image/imgChange/2.jpg',

'image/imgChange/3.jpg',

'image/imgChange/4.jpg'

];

var currentPic=0;

window.onload = function () {

//初始化上一张按钮禁用

document.getElementById('btnUp').disabled = true;

//初始化显示第一张图片

showPic(0);

//点击按钮切换到上一张

document.getElementById('btnUp').onclick = function () {

currentPic--;

if (currentPic <= 0) {

//判断如果到达第一张图片就禁用当前按钮

this.disabled=true;

}

if (document.getElementById('btnNext').disabled) {

//检测下一张按钮是否被禁用，如果被禁用，就重新启用

document.getElementById('btnNext').disabled = false;

}

showPic(currentPic);

};

//点击按钮切换到下一张

document.getElementById('btnNext').onclick = function () {

currentPic++;

if (currentPic == pic.length - 1) {

//判断如果到达最后一张图片就禁用当前按钮

this.disabled = true;

}

if (document.getElementById('btnUp').disabled) {

//检测上一张按钮是否被禁用，如果被禁用，就重新启用

document.getElementById('btnUp').disabled = false;

}

showPic(currentPic);

};

}

function showPic(_index) {

if (_index < pic.length) {

document.getElementById('img').src = pic[_index];

}

}

最后编辑：2018-04-20作者：shengruqing

这个作者貌似有点懒，什么都没有留下。

捐 赠如果您觉得这篇文章有用处，请支持作者！鼓励作者写出更好更多的文章！