jquery实现轮播图

最新推荐文章于 2024-03-14 19:48:19 发布

shitou987

最新推荐文章于 2024-03-14 19:48:19 发布

阅读量132

点赞数

分类专栏：前端文章标签： javascript js html jquery 轮播图

本文链接：https://blog.csdn.net/shitou987/article/details/112028659

版权

前端专栏收录该内容

6 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>轮播图</title>
<style>
* {
	margin: 0;
	padding: 0;
}

ul {
	list-style: none;
}

.outer {
	margin: 50px auto;
	hight: 350px;
	width: 600px;
	position: relative;
}

img {
	hight: 400px;
	width: 400px;
	position: absolute;
	top: 0;
	left: 0
}

.num {
	position: absolute;
	top: 280px;
	text-align: center;
	width: 60%;
}

.num li {
	display: inline-block;
	height: 20px;
	width: 20px;
	background-color: gray;
	color: #ffffff;
	text-align: center;
	line-height: 20px;
	border-radius: 50%;
	margin: 0 10px;
}

.btn {
	position: absolute;
	height: 60px;
	width: 30px;
	background-color: gray;
	color: #ffffff;
	text-align: center;
	line-height: 60px;
	margin-top: 140px;
}

.left_btn {
	left: 0;
}

.right_btn {
	right: 200px;
}

.outer:hover .btn {
	display: block;
}

.current {
	background-color: red !important;
}
</style>
</head>
<body>
	<div class="outer">
		<ul class="img">
			<li><a><img src="img1.jpeg"></a></li>
			<li><a><img src="img2.jpeg"></a></li>
			<li><a><img src="img3.jpeg "></a></li>
			<li><a><img src="img4.jpeg"></a></li>
		</ul>
		<ul class="num">
			<li class="current">1</li>
			<li>2</li>
			<li>3</li>
			<li>4</li>
		</ul>
		<div class="left_btn btn"><</div>
		<div class="right_btn btn">></div>

	</div>

	<script type="text/javascript" src="jquery-3.5.0.js"></script>
	<script>
		/* 手动轮播 */
		$(".num li").mouseover(function() {
			$(this).addClass("current").siblings().removeClass("current");
			var index = $(this).index();
			$(".img li").eq(index).stop().fadeIn(1000).siblings().stop().fadeOut(1000);
			
			//解決自动轮播到1时，突然手动点击了3，轮播时还是会从2开始
			//变量i引起的，需要在手动操作完之后，把index赋值给i
			i = index;
		})
		/* 自动轮播 */
		var i = 0;
		function move() {
			if(i==4){
				i=0;
			}
			//stop():停掉之前的。然后再开始，避免手动操作导致混乱
			$(".num li").eq(i).addClass("current").siblings().removeClass("current");
			$(".img li").eq(i).stop().fadeIn(1000).siblings().stop().fadeOut(1000);
			i++;
		}
		var time = setInterval(move, 3000);
		
		/* 因为自动轮播和手动轮播互相干扰，添加功能：当鼠标放到图片市，不自动轮播 */
		//停止自动轮播
		function f1(){
			clearInterval(time);
		}
		//回复自动轮播
		function f2(){
			time = setInterval(move, 3000);
		}
		$(".outer").hover(f1, f2);
		
		
		//按钮轮播
		//点击右侧按钮，相当于触发一次自动轮播
		function right(){
			move();
		}
		$(".right_btn").click(right);
		
		//左侧按钮
		function moveLeft() {
			if(i==0){
				i=4;
			}
			i--;
			$(".num li").eq(i).addClass("current").siblings().removeClass("current");
			$(".img li").eq(i).stop().fadeIn(1000).siblings().stop().fadeOut(1000);
			
		}
		$(".left_btn").click(moveLeft);

	//遗留问题：图片个数写死了
	//图片的html代码也写死了，如果根据配置的图片显示就好了
	</script>
</body>
</html>