轮播图案例

最新推荐文章于 2024-07-10 10:14:49 发布

CodeCode!

最新推荐文章于 2024-07-10 10:14:49 发布

阅读量152

点赞数

分类专栏：前端案例文章标签： js css html5 javascript

本文链接：https://blog.csdn.net/qq_42847094/article/details/108648094

版权

前端案例专栏收录该内容

3 篇文章 0 订阅

订阅专栏

轮播图案例

效果

在这里插入图片描述

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<link rel="stylesheet" type="text/css" href="css/swiper.css"/>
	</head>
	<body>
		<div class="swiper">
			<div class="imgList">
				<div class="imgItem active" style="background-image: url(img/img1.webp);"></div>
				<div class="imgItem" style="background-image: url(img/img2.jpg);"></div>
				<div class="imgItem" style="background-image: url(img/img3.webp);"></div>
				<div class="imgItem" style="background-image: url(img/img4.webp);"></div>
				<div class="imgItem" style="background-image: url(img/img5.webp);"></div>
			</div>
			
			<div class="btnList">
				<div class="btn pre"> < </div>
				<div class="btn next"> > </div>
			</div>
			
			<!-- 4个小圆形 -->
			<div class="circleList">
				<div id="c0" class="circleItem active"></div>
				<div id="c1" class="circleItem"></div>
				<div id="c2" class="circleItem"></div>
				<div id="c3" class="circleItem"></div>
				<div id="c4" class="circleItem"></div>
			</div>
		</div>
		
		<script type="text/javascript">
			/* 按钮（上） */
			var preBtn = document.querySelector(".swiper .pre");
			/* 按钮（下） */
			var nextBtn = document.querySelector(".swiper .next");
			/* 图片列表 */
			var imgListDivs = document.querySelectorAll(".swiper .imgItem");
			/* 圆点列表 */
			var circleDivs = document.querySelectorAll(".swiper .circleItem");
		
			var currentImg = 0; /* 记录当前位置*/
			
			console.log(imgListDivs)
			
			//下一张图
			nextBtn.onclick = function(){
				currentImg = currentImg + 1; 
				if(currentImg >= imgListDivs.length){
					currentImg = 0;
				}
				renderNumImg();
			}
			
			
			//上一张图
			preBtn.onclick = function(){
				currentImg = currentImg - 1;
				if(currentImg < 0){
					currentImg = imgListDivs.length - 1;
				}
				renderNumImg();
			}
			
			function renderNumImg(){
				//初始化，将所有的img列表的activ去掉
				imgListDivs.forEach(function(item,i){
					item.classList.remove("active");
				})
				
				//去掉小圆
				circleDivs.forEach(function(item,i){
					item.classList.remove("active"); /* 移除*/
				})
				
				//圆点跟着，切换（添加）
				imgListDivs[currentImg].classList.add('active');
				circleDivs[currentImg].classList.add('active');
				
				//设置点小圆，图片也跟着同步
				circleDivs.forEach(function(item,i){
					console.log(item);
					item.onclick = function(){
						currentImg = i; //把当前的的位置给currentImg
						console.log(i)
						renderNumImg(); //再调用函数
					}
				})
			}
			
		</script>
	</body>
</html>

*{
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}


.swiper{
	width: 1226px;
	height: 460px;
	margin: 0 auto;
	position: relative;
}
.swiper>.imgList{
	width: 100%;
	height: 100%;
	position: relative;
}

.swiper>.imgList>.imgItem{
	width: 100%;
	height: 100%;
	background-size: 100% 100%;
	position: absolute;
	left: 0;
	top: 0;
	opacity: 0;
	transition: all 0.5s;
}

.swiper>.imgList>.imgItem.active{
	opacity: 1;
}
.swiper .btn.pre{
	width: 80px;
	height: 60px;
	line-height: 60px;
	text-align: center;
	background-color: rgba(0,0,0,0.6);
	color: #fff;
	
	position: absolute;
	top: calc(50% - 30px);
	font-size: 30px;
}

.swiper .btn.next{
	width: 80px;
	height: 60px;
	line-height: 60px;
	text-align: center;
	background-color: rgba(0,0,0,0.6);
	color: #fff;
	
	position: absolute;
	top: calc(50% - 30px);
	right: 0;
	font-size: 30px;
}

/* 设置4个小圆 */
.swiper>.circleList{
	width: 100%;
	height: 80px;
	display: flex;
	padding: 0 30px;
	justify-content: flex-end;
	align-items: center;
	position: absolute;
	left: 0;
	bottom: 0;
}

.swiper>.circleList>.circleItem{
	width: 10px;
	height: 10px;
	border: 2px solid #999;
	background-color: #666;
	border-radius: 5px;
	margin: 0 3px;
}

/* 第一个圆默认，填充颜色  */
.swiper>.circleList>.circleItem.active{
	background-color: #ccc;
	border: 2px solid #666;
}

CodeCode!

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
轮播图案例

轮播图案例效果<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <link rel="stylesheet" type="text/css" href="css/swiper.css"/> </head> <body> <div class="swiper"> <
复制链接

扫一扫