JS实现轮播图效果

最新推荐文章于 2024-04-12 07:49:03 发布

陈老说

最新推荐文章于 2024-04-12 07:49:03 发布

阅读量229

点赞数

文章标签： javascript vue.js html js轮播

本文为明哥原创文章，未经本文博主允许不得转载，否则将追究法律责任

本文链接：https://blog.csdn.net/weixin_40845165/article/details/123563614

版权

<!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>

陈老说

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
打赏
0
评论
JS实现轮播图效果

<!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; .
复制链接

扫一扫