js实现简单的图片轮播功能
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>图片轮播</title>
<style>
.show{
display: inline-block;
}
.hide{
display: none;
}
</style>
</head>
<body>
<div>
<img class="show" src="../images/01.jpg">
<img class="hide" src="../images/02.jpg">
<img class="hide" src="../images/03.jpg">
</div>
</body>
<script>
window.onload = function lunbo(){
var i = 0;
setInterval(function(){
var img = document.getElementsByTagName('img');
i++;
var num = i%img.length;
img[num].className = "show";
},2000)
}
</script>
</html>
问题：我用求余的方法去实现这个功能，num是一直在0，1，2之间循环，那么如何设置，在img[num]显示的时候，其余的两张
或者n张图片是隐藏的。谢谢大神
anfly浏览 2530回答 1
1回答
-
一席青衫粗布依丶
window.onload = function(){ var i=0,num=0; var img = document.getElementsByTagName('img'); setInterval(function(){ num = i%img.length; i==img.length? i = 0 : i++; img[num].className = "show"; for(var j=0;j<img.length;j++){ if(j == num){ continue; }else{ img[j].className = "hide"; } } },2000) } 开始计时器时间有多余延时，还没有解决，图片切换没问题
随时随地看视频慕课网APP
相关分类
JavaScript