<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript">
window.onload = function () {
var icon = document.getElementById("icon");
var prev = document.getElementById("prev");
var next = document.getElementById("next");
//监听按钮的点击
var maxIndex = 9,
minIndex = 1,
currentIndex = minIndex;
prev.onclick = function () {
if (currentIndex == minIndex){
currentIndex = maxIndex;
}else{
currentIndex--;
}
icon.setAttribute("src","img/icon_0"+currentIndex+".png");
console.log(icon.src);
};
next.onclick = function () {
if (currentIndex === maxIndex){ // 边界值
currentIndex = minIndex;
}else { // 正常情况
currentIndex ++;
}
icon.setAttribute("src", "img/icon_0" + currentIndex + ".png");
console.log(icon.src);
};
}
</script>
</head>
<body>
<img src="img/icon_01.png" alt="" id="icon">
<br>
<input type="button" id="prev" value="上一张">
<input type="button" id="next" value="下一张">
</body>
</html>
js-实现图片的点击切换
最新推荐文章于 2023-08-08 00:14:46 发布