您的位置：首页 > Web前端 > JavaScript

简单的JS轮播图

2020-07-14 06:30 615 查看

JS：

[code]<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>

页面：

[code]        <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>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航