使用jQuery实现淡入淡出轮播图（含完整源码）

使用jQuery实现这个效果其实很简单，先看效果：

话不多说，直接上代码！

html

<div class="wrapper">
	<div class="imgs">
		<img src="./img1/1.jpeg" alt="">
		<img src="./img1/2.jpeg" alt="">
		<img src="./img1/3.jpeg" alt="">
		<img src="./img1/4.jpg" alt="">
		<img src="./img1/5.jpeg" alt="">
	</div>
	<div class="dots">
		<span class="active"></span>
		<span></span>
		<span></span>
		<span></span>
		<span></span>
	</div>
	<a href="javascript:void(0);">&lt;</a>
	<a href="javascript:void(0);">&gt;</a>
</div>

css

<style>
	.wrapper{
		width: 650px;
		height: 400px;
		position: relative;
	}
	.wrapper .imgs img{
		width: 100%;
		height: 100%;
		position: absolute;
		top: 0;
		left: 0;
		display: none;
	}
	.wrapper .imgs img:nth-of-type(1){
		display: block;
	}
	.wrapper .dots{
		width: 150px;
		display: flex;
		justify-content: space-around;
		position: absolute;
		left: 30%;
		bottom: 5%;
	}
	.wrapper .dots span{
		width: 15px;
		height: 15px;
		border: 5px solid white;
		border-radius: 50%;
	}
    .wrapper a{
		position: absolute;
		top: 35%;
		font-size: 80px;
		text-decoration: none;
		color: white;
	}
	.wrapper a:nth-of-type(2){
		right: 0;
	}
	.active{
		background-color: #fff;
	}
</style>

js

<script src="./js/jquery-3.6.1.js"></script>
		<script>
			$(function(){
				var index=0;
				$("a:last").click(function(){
					index++;
					if(index>4){
						index=0;
					}
					addStyle();
				})
				$("a:first").click(function(){
					index--;
					if(index<0){
						index=4;
					}
					addStyle();
				})
				
				function addStyle(){
					$("img").eq(index).fadeIn();
					$("img").eq(index).siblings().fadeOut();
					$("span").eq(index).addClass("active");
					$("span").eq(index).siblings().removeClass("active");
				}
				
				var id;
				autoplay();
				function autoplay(){
					id=setInterval(function(){
						$("a:last").trigger("click");
					},1000)
				}
				
				$(".wrapper").mouseover(function(){
					clearInterval(id);
				})
				$(".wrapper").mouseout(function(){
					autoplay();
				})
			})
		</script>

实现过程如上，如果有帮助的话就点个赞吧~

下一篇会讲如何让用jQuery来实现位移轮播

敬请期待~~