轮播图的实现原理（左右键切换，圆点切换）

最新推荐文章于 2024-06-21 13:57:48 发布

舒眉

最新推荐文章于 2024-06-21 13:57:48 发布

阅读量5.5k

点赞数 2

分类专栏：前端技术

本文链接：https://blog.csdn.net/sunshine_0880/article/details/108088629

版权

前端技术专栏收录该内容

38 篇文章 5 订阅

订阅专栏

轮播图的实现分两部分，第一部分是图片的切换，另一部分是圆的选择改变图片。

首先图片的切换，主要用到了position，每张图片都设定position：absolute；属性，并没有用到浮动的效果。还有设定好被选中的图片的样式。当点击左键时，对图片的index进行判断，若为第一张，要改变index的值为4，其他执行Index--即可；当点击右键时，对图片的index值进行判断，若为最后一张，改变index的值为0，其他执行index++即可。

随后进行圆点的切换时，首先要考虑到为每个圆点设置data-index的属性，记录每个圆点的下标值，方便js操作时获取点击圆点的下标。要操作一个for循环对每一个圆点进行监听。

具体操作如下代码：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>01</title>
	<style type="text/css">
		.wrap {
			width: 800px;
			height: 400px;
			position: relative;
		}
		ul {
			list-style: none;
		}
		.list {
			width: 800px;
			height: 400px;
			position: relative;
			padding-left: 0;
		}
		.item {
			position: absolute;
			width: 100%;
			height: 100%;
			color: #fff;
			font-size: 50px;
			opacity: 0;
			transition: all .5s;
			/*淡入淡出*/
		}
		.item:nth-child(1){
			background-color: black;
		}
		.item:nth-child(2){
			background-color: yellow;
		}
		.item:nth-child(3){
			background-color: pink;
		}
		.item:nth-child(4){
			background-color: orange;
		}
		.item:nth-child(5){
			background-color: green;
		}
		.btn {
			width: 40px;
			height: 40px;
			position: absolute;
			top: 180px;
			z-index: 1000;
		}
		#gePre {
			left: 0px;
		}
		#geNext {
			right: 0px;
		}
		.item.active {
			opacity: 1;
			z-index: 100;
		}
		/*以下为圆点样式*/
		.pointList {
			position: absolute;
			right: 20px;
			bottom: 20px;
			z-index: 1000;
		}
		.point {
			display: block;
			width: 10px;
			height: 10px;
			background-color: #666;
			float: left;
			margin-left: 20px;
			border-radius: 50%;
			border: 1px solid #fff;
		}
		.point.active {
			background-color: #fff;
		}
	</style>
</head>
<body>
	<div class="wrap">
		<ul class="list">
			<li class="item active">1</li>
			<li class="item">2</li>
			<li class="item">3</li>
			<li class="item">4</li>
			<li class="item">5</li>
		</ul>
		<ul class="pointList">
			<li class="point active" data-index="0"></li>
			<li class="point" data-index="1"></li>
			<li class="point" data-index="2"></li>
			<li class="point" data-index="3"></li>
			<li class="point" data-index="4"></li>	
		</ul>
		<button type="button" class="btn" id="gePre"><</button>
		<button type="button" class="btn" id="geNext">></button>
	</div>
</body>
	<script type="text/javascript">
		var items = document.getElementsByClassName('item');//图片
		var points = document.getElementsByClassName('point');//点
		var gePre = document.getElementById('gePre');
		var geNext = document.getElementById('geNext');

		var index = 0;//表示第几张图片  加上active类名

		var clearActive = function(){
			// 清楚图片的active类名
			for(var i=0;i<items.length;i++){
				items[i].className='item';
			}
			// 清楚点的active类名
			for(var i=0;i<points.length;i++){
				points[i].className='point';
			}
		}

		var goIndex = function(){
			clearActive();
			items[index].className = 'item active';
			points[index].className = 'point active';//该index下的点设置point active 类名
		}
		// 进行下一张
		var goNext = function(){
			if(index < 4){
				index++;
			}else{
				index = 0;
			}
			
			goIndex();
		}
		// 进行上一张
		var goPre = function(){
			if(index == 0){
				index = 4;
			}else{
				index--;
			}
			goIndex();
		}

		geNext.addEventListener('click',function(){
			goNext();
		})
		gePre.addEventListener('click',function(){
			goPre();
		})

		// ------圆点行为-----对每一个圆点设置监听----
		for(var i = 0;i < points.length;i++){
			points[i].addEventListener('click',function(){
				index = this.getAttribute('data-index');
				goIndex();
			})
		}

	</script>
</html>

舒眉

关注

2
点赞
踩
31

收藏

觉得还不错? 一键收藏
2
评论
轮播图的实现原理（左右键切换，圆点切换）

轮播图的实现分两部分，第一部分是图片的切换，另一部分是圆的选择改变图片。首先图片的切换，主要用到了position，每张图片都设定position：absolute；属性，并没有用到浮动的效果。还有设定好被选中的图片的样式。当点击左键时，对图片的index进行判断，若为第一张，要改变index的值为4，其他执行Index--即可；当点击右键时，对图片的index值进行判断，若为最后一张，改变index的值为0，其他执行index++即可。随后进行圆点的切换时，首先要考虑到为每个圆点设置data-in
复制链接

扫一扫