<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
#box{
width: 2000px;
height: 500px;
}
#box>img{
margin:100px auto;
display: none;
width: 650px;
height: 500px;
border: 2px solid black;
}
</style>
</head>
<body>
<div id="box">
<!--为了便于区分,我加的是颜色,图片自己加-->
<img style="display: block;background: red;" src="" alt=""/>
<img style="background: blue;" src="" alt=""/>
<img style="background: black;" src="" alt=""/>
<img style="background: pink;" src="" alt=""/>
<img style="background: skyblue;" src="" alt=""/>
</div>
<script>
var box = document.getElementById("box");
//获取包裹img的盒子的id,class也可以,标签名也行,看个人喜好
var img = box.getElementsByTagName("img");
//获取图片
var i = 0
//定义一个全局变量i
setInterval (function(){//setInterval 定时器
i++;
if(i==img.length){
//获取img的长度(就是img的个数),每当循环到img。length就将他重新赋值为0
//再次从第一张图片开始循环
i = 0
}
for(var j = 0;j <img.length;j++){//for循环
//定义一个变量j且初始值为0
img[j].style.display = "none";
//第一张图片消失
}
img[i].style.display = "block";
//i已经使用过一次,此时的值为1,所以第二张图片出现
},1000)
</script>
</body>
</html>
JS实现轮播图效果
最新推荐文章于 2024-06-17 15:29:34 发布