轮播图的实现

最新推荐文章于 2022-01-18 01:19:00 发布

choly192

最新推荐文章于 2022-01-18 01:19:00 发布

阅读量179

点赞数

分类专栏： Js应用实例

本文链接：https://blog.csdn.net/choly192/article/details/100025291

版权

Js应用实例专栏收录该内容

1 篇文章 0 订阅

订阅专栏

HTML代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<link rel="stylesheet" type="text/css" href="lb.css"/>
	</head>
	<body>
		<div id="main" class="contain">
			<ul class="rol-img">
				<li><img src="images/01.jpg" ></li>
				<li><img src="images/02.jpg" ></li>
				<li><img src="images/03.jpg" ></li>
			</ul>
			
			<ul class="rol-circle">
				<li class="active"></li>
				<li></li>
				<li></li>
			</ul>
		</div>
		
		
		
		<script src="lb.js" type="text/javascript" charset="utf-8"></script>
	
	</body>
</html>

CSS代码：

*{
	margin: 0;
	padding: 0;
	list-style: none;
	
}
.contain{
	width: 500px;
	height: 300px;
	margin: 0 auto;
	margin-top: 100px;
	display: flex;
	justify-content: center;
	overflow: hidden;
	position: relative;
}
.rol-img{
	width: 500px;
	height: 300px;
}
.rol-circle{
	/* background-color: aqua; */
	position: absolute;
	bottom: 10px;
	left: 50%;
	
}
.rol-circle li {
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background-color: #f0f0f0;
	float: left;
	margin-right: 10px;
}
.rol-circle .active {
	background-color: red;
}

JS代码：

var swipIndex=1;
setInterval(fn,2000);
function fn(num){
	var isNum=num;
	num=num||swipIndex++;
	num=num%3;
	if(num==isNum){
		swipIndex=num;
	}
	for(var i=0;i<3;i++){
		document.querySelectorAll(".rol-img li")[i].style.display="none";
		document.querySelectorAll(".rol-circle li")[i].style.backgroundColor="#f0f0f0";
	}
	document.querySelectorAll(".rol-img li")[num].style.display="block";
	document.querySelectorAll(".rol-circle li")[num].style.backgroundColor="red";
}


function mylb(num){
	document.querySelectorAll(".rol-circle li")[num].onclick=function(){
		fn(num);
	}
}
mylb(0);
mylb(1);
mylb(2);