jquery幻灯片

	
		
		
		
		 
		
			$(function(){
				//得到这群图片li
				var oLis = $('#slide .slide-box li');
				//得到小圆圈的对象组
				var oPage = $('#slide .slide-nav a');
				var lens = oLis.size();
				//定义一个定时器
				var oTimer = null;
				

				//遍历
				oPage.each(function(index){
					$(this).mouseover(function(){
						//将索引传入函数
						slideRun(index);
					})
				});
					
				//动起来的函数
				function slideRun(index){
					iNow = index;
					//1--小圆圈--先给自己加上，去除兄弟的样式
					oPage.eq(index).addClass('active').siblings().removeClass('active');

					//2--图片--opacity:0
					//开始一个动画之前 停止所有之前的动画
					oLis.eq(index).siblings().stop().animate({
						opacity:0
					},600).find('b').stop().animate({
							//3--小文字 向上 并消失
							top: -40,
							opacity:0
					},600);
					
					oLis.eq(index).stop().animate({
						opacity:1	
					},600).find('b').stop().animate({
							//小文字 向下并显示 
							opacity : 1,
							top : -10 
					},600);


				}

				//当前显示第几张
				var iNow = 0;
				autoRun();
				function autoRun(){
					oTimer = setInterval(function(){
					if(iNow > lens-1){
						//边界控制
						iNow = 0;
					}
					slideRun(iNow);
					iNow++;
					},5000);
				}

				

				//
				oLis.hover(function(){
					//鼠标放上去--->图片停止
					//清除定时器
					clearInterval(oTimer);
				},function(){
					//鼠标移开----->图片开始自动切换
					autoRun();
				})

			})