Jquery实现轮播图

我们都知道Jquery是属于Javascript的一种框架，里面封装了很多方法，调用起来很方便。如果一个项目里有很多js脚本交互而项目又赶，可以考虑用Jquery框架，因为利用Jquery来做项目可以节省时间和成本。下面来讲讲如何利用Jquery实现轮播图。

示例：我的博客首页轮播图

需要了解的一些属性：

fadeIn：淡入

fadeOut：淡出

setInterval：定时器

实现原理：

1.因为这里用到的是fadeIn和fadeOut，所以这些图片得布局脱离文档流，因此图片的父级给相对定位，而图片(我这里是a标签)给绝对定位，left和top都设为0

2.让页面只显示一张图片，通过css样式把图片全部隐藏然后在第一张图片那里设置block。

3.点击当前小图片，会通过index下标选中相应的大图淡入，其余的图片淡出。

4.鼠标移到大图上去时清除定时器，鼠标移开时开启定时器，点击小图片时也会清除定时器，点击完成后重新开启定时器。

html代码：

<div class="swiper">
	<div class="swiper-inner">
		<a href="javascript:void(0)" style="display: block"><img src="images/page1_swiper1.jpg" alt=""></a>
		<a href="javascript:void(0)"><img src="images/page1_swiper2.jpg" alt=""></a>
		<a href="javascript:void(0)"><img src="images/page1_swiper3.jpg" alt=""></a>
		<a href="javascript:void(0)"><img src="images/page1_swiper4.jpg" alt=""></a>
		<a href="javascript:void(0)"><img src="images/page1_swiper5.jpg" alt=""></a>
	</div>
	<div class="paganation">
		<div class="b_active">
			<img src="images/page1_swiper1_1.jpg" alt=""> 	
		</div>
		<div>
			<img src="images/page1_swiper2_2.jpg" alt="">	
		</div>
		<div>
			<img src="images/page1_swiper3_3.jpg" alt="">	
		</div>
		<div>
			<img src="images/page1_swiper4_4.jpg" alt="">	
		</div>
		<div>
			<img src="images/page1_swiper5_5.jpg" alt="">	
		</div>
	</div>
</div>

css代码：

<style type="text/css">
	.swiper{
		position: relative;
		width: 600px;
		height: 300px;
	}
	.swiper .swiper-inner{
		position: relative;
		width: 600px;
		height: 300px;
		left: 0px;
		top: 0px;
	}
	.swiper .swiper-inner a{
		position: absolute;
		left: 0px;
		top: 0px;
		width: 480px;
		height: 300px;
		display: none;
	}
	.swiper .swiper-inner a img{
		width: 100%;
	}
	.swiper .paganation{
		position: absolute;
		width: 124px;
		height: 300px;
		top: 0px;
		right: -1px;
		overflow: hidden;
	}
	.swiper .paganation div{
		width: 124px;
		height: 58px;
		float: left;
		margin-bottom: 2px;
		overflow: hidden;
		cursor: pointer;
	}
	.swiper .paganation .b_active{
		width: 124px;
		height: 60px;
		margin-bottom: 0px;
		background: url(images/page1_hover.png) no-repeat;
	}
	.swiper .paganation img{
		width: 100px;
		height: 50px;
		display: block;
		margin: 5px 0px 0px 16px;
	}
	.b_right{
		position: relative;
		width: 384px;
		height: 300px;
		float: right;
	}
	.b_right img{
		width: 380px;
		height: 272px;
		padding-top: 10px;
		box-shadow: 2px 2px 5px #BDBDBD;

	}
	.b_right p{
		width: 308px;
		position: absolute;
		top: 50%;
		left: 10%;
		color: #F56B0F;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}
</style>

js代码：

<script type="text/javascript">
 	var imgLength =$(".swiper-inner a").length;	//图片的长度
 	var index = 0;//下标
 	var oTime =5000;//时间
 	//给分页器添加class和给大图片添加fadeIn和fadeOut()
 	function tab(){
			$(".paganation div").eq(index).addClass("b_active").siblings().removeClass("b_active");
			$(".swiper-inner a").eq(index).fadeIn(1200).siblings().fadeOut(1200);
 	}
 	//下一张,当走到最后一张时回到第一张stop(false,true)
 	function next() {
		index++;
		if(index > imgLength - 1) {
			index = 0;
		}
		tab();
	}
	//自动轮播
	var autoTimer = setInterval(next,oTime);
	//当鼠标移入时清除定时器,鼠标移走时从新开启定时器
	$(".swiper-inner a").hover(function() {
		clearInterval(autoTimer);
	},function() {
		autoTimer = setInterval(next,oTime);
	})

	//当鼠标移入paganation div时执行tab函数,清除定时器,鼠标移走时从新开启定时器
	$(".paganation div").click(function() {
		 	index = $(this).index();//记录当前下标
		 	clearInterval(autoTimer);
		 	tab();
			autoTimer = setInterval(next,oTime);
	})
</script>

如有写得不对的地方，欢迎指出。