- it技术
- JS实现图片切换
图片切换
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>图片切换
</title>
<style>
* {
margin: 0;
p(index+1)ing: 0;
}
#outer {
width: 500px;
margin: 50px auto;
p(index+1)ing: 10px;
background-color: greenyellow;
text-align: center;
}
</style>
<script type="text/javascript">
window.onload = function () {
var prev = document.getElementById("prev");
var next = document.getElementById("next");
var img = document.getElementsByTagName("img")[0];
var info = document.getElementById("info");
var ingArr = ["img/1.jpg", "img/2.jpg", "img/3.jpg", "img/4.jpg", "img/5.jpg"];
var index = 0;
prev.onclick = function () {
index--;
if (index < 0) {
index = ingArr.length-1;
}
info.innerHTML="一共"+ingArr.length+"张图片，这是第"+(index+1)+"张";
img.src = ingArr[index];
console.log("上"+index);
};
next.onclick = function () {
index++;
if (index >ingArr.length-1){
index = 0;
}
info.innerHTML="一共"+ingArr.length+"张图片，这是第"+(index+1)+"张";
img.src = ingArr[index];
console.log("下"+index);
};
};
</script>
</head>
<body>
<div id="outer">
<p id="info">一共五张图片，当前第1张
</p>
<img src="img/1.jpg" alt="冰棍">
<button id="prev">上一张
</button>
<button id="next">下一张
</button>
</div>
</body>
</html>
效果图如下：
