JS:
<script type="text/javascript">
window.onload = function() {
var imgs = document.getElementsByClassName("icu");
var btn1 = document.getElementById("btn1");
var btn2 = document.getElementById("btn2");
var num = 0;
function show() {
for(var i = 0; i < imgs.length; i++) {
imgs[i].style.display = "none";
}
imgs[num].style.display = "block";
}
setInterval(function() {
num++;
if(num == imgs.length) {
num = 0;
}
show();
}, 5000)
btn1.onclick = function() {
num--;
if(num < 0) {
num = imgs.length - 1;
}
show();
}
btn2.onclick = function() {
num++;
if(num == imgs.length) {
num = 0;
}
show();
}
}
</script>
页面:
<body>
<div id="imgs">
<img src="img/1.jpg" class="icu" />
<img src="img/2.jpg" class="icu" />
<img src="img/3.jpg" class="icu" />
<img src="img/4.jpg" class="icu" />
<img src="img/5.jpg" class="icu" />
<img src="img/6.jpg" class="icu" />
<img src="img/7.jpg" class="icu" />
<input type="button" id="btn1" value="<" />
<input type="button" id="btn2" value=">" />
</div>
</body>