jQuery淡入淡出轮播特效(含完整源码)

本博文源于jquery基础，旨在实现淡入淡出轮播特效。先看效果

测试效果

实验步骤

测试用图

右击图片另存为

html代码书写

html代码仔细回想，一个是图片的，我们用li模拟，一个是小圆按钮的，模拟进去，一个是左右大于小于负号的，模拟进去。

	<div class="carousel" id="carousel">
		<div class="carousel_images">
			<ul class="unit">
				<li class="first">
					<a href="">
						<img src="images/0.jpg" alt="">
					</a>
				</li>
				<li>
					<a href="">
						<img src="images/1.jpg" alt="">
					</a>
				</li>
				<li>
					<a href="">
						<img src="images/2.jpg" alt="">
					</a>
				</li>
				<li>
					<a href="">
						<img src="images/3.jpg" alt="">
					</a>
				</li>
				<li>
					<a href="">
						<img src="images/4.jpg" alt="">
					</a>
				</li>
			
			</ul>
		</div>
		<div class="carousel_nav">
			<ol>
				<li class="cur"></li>
				<li></li>
				<li></li>
				<li></li>
				<li></li>
			</ol>
		</div>
		<div class="carousel_btns">
			<a href="javascript:;" class="btn left">&lt;</a>
			<a href="javascript:;" class="btn right">&gt;</a>
		</div>
	</div>

css代码

css代码，就是制作出只能容纳一张图片的特效那就肯定要设置overflow，然后其中一张图片显示，左右按钮的浮动设置。

*{
	margin: 0;
	padding: 0;
}
.carousel{
	width:650px;
	height:360px;
	margin: 100px auto;
	position: relative;
	 
}
.carousel .carousel_images .unit{
	list-style:none;
	width:520px;
	height:280px;
	position: relative;
}
.carousel .carousel_images .unit li{
	position: absolute;
	top: 0;
	left:0;
	width:520px;
	height:280px;
	display: none;
}
.carousel .carousel_images .unit li.first{
	display: block;
}
.carousel .carousel_nav{
	position: absolute;
	bottom:0;
	right:0;
	width: 123px;
	height: 24px;
}
.carousel .carousel_nav ol{
	list-style: none;
}
.carousel .carousel_nav ol li{
	float: left;
	width:16px;
	height: 16px;
	margin-right: 6px;
	border-radius: 50%;
	background-color: #eee;
	opacity: 0.6;
}
.carousel .carousel_nav ol li.cur{
	background:darkred;
}
.carousel .carousel_btns .btn{
	position: absolute;
	width:40px;
	height:40px;
	border-radius: 20%;
	background-color: #ffd700;
	text-align: center;
	line-height: 40px;
	font-size: 30px;
	font-family: serif;
	text-decoration: none;
	color:#333;
	font-weight: bold;
}
.carousel .carousel_btns .btn.left{
	top:50%;
	left:10px;
	margin-top: -20px;
 
}
.carousel .carousel_btns .btn.right{
	top:50%;
	right:10px;
	margin-top: -20px;
}

jquery代码

专门负责动画操作，动画是淡入淡出动画，那就需要用到fadeIn和fadeOut然后如果按钮一直按过去，需要循环播放的效果，然后代码如下，需要注意jquery版本与路径

<script type="text/javascript">
	// 得到DOM元素
	var $carousel = $("#carousel");
	var $unit = $("#carousel .unit");
	var $btn_right = $("#carousel .carousel_btns .right");
	var $btn_left = $("#carousel .carousel_btns .left");
	var $carousel_nav_lis = $("#carousel .carousel_nav ol li");

	//信号量
	var idx = 0;

	//右按钮的监听
	$btn_right.click(function(){
		//防动画积累
		if($unit.is(":animated")) return;
		//老图淡出
		$unit.find("li").eq(idx).fadeOut('fast');
		//信号量改变
		idx++;
		if(idx > 4){
			idx = 0;
		}
		//新图淡入
		$unit.find("li").eq(idx).fadeIn('fast');

		//小圆点的变化
		$carousel_nav_lis.eq(idx).addClass("cur").siblings().removeClass("cur");
	});


	//左按钮的监听
	$btn_left.click(function(){
		//防动画积累
		if($unit.is(":animated")) return;

		//老图淡出
		$unit.find("li").eq(idx).fadeOut('fast');
		//信号量改变
		idx--;
		if(idx < 0){
			idx = 4;
		}
		//新图淡入
		$unit.find("li").eq(idx).fadeIn('fast');

		//小圆点的变化
		$carousel_nav_lis.eq(idx).addClass("cur").siblings().removeClass("cur");
	});


	//小圆点的监听
	$carousel_nav_lis.click(function(){
		//老图淡出
		$unit.find("li").eq(idx).fadeOut('fast');
		//改变信号量
		idx = $(this).index();
		//新图淡入
		$unit.find("li").eq(idx).fadeIn('fast');

		//小圆点的变化
		$carousel_nav_lis.eq(idx).addClass("cur").siblings().removeClass("cur");
	});
</script>

总结

这个特效的原理就是在信号量改变之前我图片淡出，信号量改变之后，图片淡入。图片的循环往复事件监听要考虑还有左右按钮一按小圆点颜色改变要考虑。