jquery实现轮播图

最新推荐文章于 2024-08-27 19:30:26 发布

Shirley~~

最新推荐文章于 2024-08-27 19:30:26 发布

阅读量159

点赞数

文章标签： jquery javascript 前端

本文链接：https://blog.csdn.net/weixin_45866961/article/details/125448133

版权

在这里插入图片描述
源码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			.rotation{
				width: 600px;
				height: 400px;
				margin: 0 auto;
				position: relative;
			}
			.imgs img{
				width: 600px;
				height: 400px;
				text-align: center;
				position: absolute;
				left: 0;
				top: 0;
			}
			.imgs .num1{
				z-index: 1;
			}
			.buts{
				position: absolute;
				z-index: 2;
			}
			.buts span{
				width: 20px;
				height: 40px;
				line-height: 40px;
				text-align: center;
				background-color: #969393;
				font-size: 24px;
				color: #DFDFDF;
				position: absolute;
				top: 200px;
				/* top: 50%; */
				margin-top: -20px;
				left: 0;
				cursor: pointer;
			}
			.buts .rightBut{
				left: auto;/* //让left之前的值没有作用 */
				right: -600px;
			}
			.pointers{
				width: 100px;
				position: absolute;
				left: 50%;
				margin-left: -50px;
				bottom: 0;
				z-index: 2;
				margin-bottom: 10px;
			}
			.pointers li{
				width: 6px;
				height: 6px;
				border: 2px solid #DFDFDF;
				border-radius: 50%;
				list-style: none;
				background-color: #F7F7F7;
				float: left;
				margin-right: 10px;
			}
			.pointers .on{
				background-color: skyblue;
			}
		</style>
	</head>
	<body>
		<div class="rotation">
			<!-- 轮播图片区域 -->
			<div class="imgs">
				<img class="num1" src="../项目/002%20mi官网/img/1.jpg" >
				<img src="../项目/002%20mi官网/img/2.jpg" >
				<img src="../项目/002%20mi官网/img/3.jpg" >
				<img src="../项目/002%20mi官网/img/4.jpg" >
				<img src="../项目/002%20mi官网/img/5.jpg" >
			</div>
			<!-- 按钮区域 -->
			<div class="buts">
				<span class="leftBut">&gt</span>
				<span class="rightBut">&lt</span>
			</div>
			<!-- 小点点区域 -->
			<ul class="pointers">
				<li class="on"></li>
				<li></li>
				<li></li>
				<li></li>
				<li></li>
			</ul>
		</div>
		<script src="js/jQuery.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			$(function(){
				// 事件：点击左右按钮，点击下一个按钮下一个层级变高
				// 获取img集合
				var $imgs = $('.imgs img');
				// 获取li集合
				var $lis = $('.pointers li');
				// 获取左右按钮
				var $leftBut = $('.leftBut');
				var $rightBut = $('.rightBut');
				// 获取img集合
				var $imgs = $('.imgs img');
				// 记录一个变量用来保存当前显示的索引
				var currentIndex = 0;
				// 左右按钮事件
				$leftBut.click(function(){
					nextPage(false);
				})
				$rightBut.click(function(){
					nextPage(true);
				})
	
				// 传入一个形参，来确定是否是下一张
				function nextPage(next){
					var index = next ? currentIndex+1 : currentIndex-1;
					if(index > $imgs.length-1){
						index = 0;
					}else if(index < 0){
							index = 4;
					}
					$imgs.eq(currentIndex).toggleClass('num1');
					$imgs.eq(index).toggleClass('num1');
					nextpointer(next);
					currentIndex = index;
					
				/* 	if(next){
						// 进行类名切换
						$imgs.eq(index).toggleClass('num1');
						index++;
						if(index > $imgs.length-1){
							index = 0;
							$imgs.eq(index).toggleClass('num1');
							return;
						}
						$imgs.eq(index).toggleClass('num1');
					}else{
						$imgs.eq(index).toggleClass('num1');
						index--;
						if(index < 0){
							index = 4;
							$imgs.eq(index).toggleClass('num1');
							return;
						}
						$imgs.eq(index).toggleClass('num1');
					} */
				}
				// 小圆点切换
				function nextpointer(next){
					var index = next ? currentIndex+1 : currentIndex-1;
					if(index > $lis.length-1){
						index = 0;
					}else if(index < 0){
						index = 4;
					}
					$lis.eq(currentIndex).toggleClass('on');
					$lis.eq(index).toggleClass('on');
					currentIndex = index;
				}
				// 小圆点点击事件
				$lis.click(function(){
					var index = $(this).index();
					$lis.eq(currentIndex).toggleClass('on');
					$lis.eq(index).toggleClass('on');
					$imgs.eq(currentIndex).toggleClass('num1');
					$imgs.eq(index).toggleClass('num1');
					// console.log(index);
					currentIndex = index;
				})
			})
		</script>
	</body>
</html>