（前端学习）05- 原生JS实现简单轮播图

最新推荐文章于 2022-07-06 16:28:54 发布

沉迷学习-

最新推荐文章于 2022-07-06 16:28:54 发布

阅读量171

点赞数 1

分类专栏：前端学习文章标签： JS

本文链接：https://blog.csdn.net/weixin_44586318/article/details/100521372

版权

前端学习专栏收录该内容

24 篇文章 0 订阅

订阅专栏

HTML

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<link rel="stylesheet" type="text/css" href="carousel.css" />
		
	</head>
	<body>
		<div id="container">
			<div id="list">
				<div class="img"><img src="../images/10.jpg" alt="image1"/ ></div>
				<div class="img hide"><img src="../images/9.jpg" alt="image2"/></div>
				<div class="img hide"><img src="../images/8.jpg" alt="image3"/></div>
				<div class="img hide"><img src="../images/7.jpg" alt="image4"/></div>
			</div>
			<div id="pre"><a>上一页</a></div>
			<div id="next"><a>下一页</a></div>
		</div>
		<script src="carousel.js"></script>
	</body>
</html>

css

*{
	padding: 0px;
	margin: 0px;
}
#container{
	margin: 100px auto;
	width: 600px;
	height: 300px;
	border: 1px solid black;
	border-radius: 5px;
}
#list{
	
}
#pre{
	width: 70px;
	height: 20px;
	background-color: black;
	position: absolute;
	top: 250px;
	border: 1px solid black;
	border-radius: 5px;
	opacity: 0.5;
	color: white;
	cursor:pointer;
}
#next{
	width: 70px;
	height: 20px;
	background-color: black;
	position: absolute;
	top: 250px;
	left: 1100px;
	border: 1px solid black;
	border-radius: 5px;
	opacity: 0.5;
	color: white;
	cursor:pointer;
}

.img img{
	width: 600px;
	height: 300px;
	float: left;
}
.hide{
	display: none;
}

Javascript

window.onload = function(){
	var list = document.getElementById("list");
	var pre = document.getElementById("pre");
	var next = document.getElementById("next");
	var flag = 0;
	var last = 3;
	// 找到list下的所有元素
	var tags = list.getElementsByTagName("*");
	imgs=[];
	// 筛选有用元素
	for(var i=0;i<tags.length;i++){
		if(tags[i].className.indexOf("img")>=0){
			imgs.push(tags[i]);
		}
	}
	// 两秒翻一页
	setInterval(p,2000);
	
	// 监听上下一页时候被点击
	pre.onclick= p;
	next.onclick = n;
	function p(){
		imgs[flag].className += " hide";
		if(flag===0){
			flag =last;
		}else{
			flag -= 1;
		}
		imgs[flag].classList.remove("hide");
	}
	function n(){
		imgs[flag].className += " hide";
		if(flag===last){
			flag =0;
		}else{
			flag += 1;
		}
		imgs[flag].classList.remove("hide");
	}
	
	
	console.log(imgs[0].classList);
}

沉迷学习-

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
（前端学习）05- 原生JS实现简单轮播图

HTML<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <link rel="stylesheet" type="text/css" href="carousel.css" /> </head&g...
复制链接

扫一扫