JQuery 实现轮播图（一）

要求： 

    1、每隔3秒换一张图片，循环播放；

    2、鼠标悬停上显示图片，时钟停止；离开鼠标，时钟启动；

    3、单击左边或右边显示图片，时钟不停止；

HTML页面

		
		

			

				
				

					

					

					

					

					

				
				
				

					

						1
					
					

						2
					
					

						3
					
					

						4
					
					

						5
					
				
				
				

					
					
				

			
		

	

CSS样式

	* {
				margin: 0px;
				padding: 0px;
			}
			
			ul {
				list-style: none;
			}
			
			a {
				text-decoration: none;
			}
			/*焦点图*/
			.banner .my {
				width: 700px;
				height: 401px;
				margin: 0px auto;
				overflow: hidden;
				position: relative;
				z-index: 1;
			}
			
			.num {
				position: absolute;
				bottom: 20px;
				right: 290px;
				z-index: 2;
			}
			
			.num li {
				float: left;
				width: 30px;
				height: 30px;
				line-height: 30px;
				border-radius: 50%;
				background: papayawhip;
				text-align: center;
				margin: 0 4px;
				font-weight: bolder;
			}
			
			.num li a {
				color: #000;
			}
			
			.num li:hover,
			.num .active {
				background: coral;
			}
			
			.num li:hover a,
			.num .active a {
				color: #fff;
			}
			
			.banner .slide_box li {
				height: 401px;
				position: relative;
			}
			/* 焦点图左右按钮 */
			.banner .op_btns a {
				display: block;
				width: 32px;
				height: 60px;
				cursor: pointer;
				position: absolute;
				margin-top: 80px;
			}
			/*左边图片*/
			.banner .op_prev {
				background: url(img/b_left.png) no-repeat center top;
				left: 0;
				top: 90px;
			}
			/*右边图片*/
			.banner .op_next {
				background: url(img/b_right.png) no-repeat center top;
				right: 110px;
				top: 90px;
			}

 jquery脚本处理

function changeImg2() {
	//索引
	var index = 0;
	//停止
	var stop = false;
	//图片li
	var $imgLi = $('.slide_box').children('li');
	//数字li
	var $numLi = $('.num').children('li');
	//鼠标悬停到数字上
	$numLi.mouseover(function() {
		stop = true; //启动
		//获得数字索引
		index = $numLi.index($(this));
		//图片出来，后面的图片消失
		//stop()停止当前正在运行的动画
		$imgLi.eq(index).stop().fadeIn().siblings().fadeOut();
		//添加当前样式，移除后面兄弟的样式
		$(this).addClass("active").stop().siblings().removeClass('active');
	}).mouseout(function() { //离开停止
		stop = false;
	});
	
	
	//时钟
	var timer=setInterval(function(){
		//在启动，就不执行下面的
		if(stop) return;
		//index
		index++;
		//判断是否》=图片的个数
		if(index>=$imgLi.length){
			index=0;
		}
		//图片出来，后面的图片消失
		$imgLi.eq(index).stop().fadeIn().siblings().fadeOut();
		
		//添加当前样式，移除后面兄弟的样式
		$numLi.eq(index).addClass("active").stop().siblings().removeClass("active");
		
	},3000);
	
	
	
	//单击右边
	$(".op_next").click(function(){

		//索引
		index++;
		
		//判断是否》=图片的个数
		if(index>=$imgLi.length){
			index=0;
		}
		//图片出来，后面的图片消失
		$imgLi.eq(index).stop().fadeIn().siblings().fadeOut();
		
		//数字添加样式
        $numLi.eq(index).addClass("active").stop().siblings().removeClass("active");

	});
	
	
	//单击左边
	$(".op_prev").click(function(){

		//索引
		index--;
		//判断索引<0
		if(index<0){
			index=$imgLi.length-1;
		}
		//图片出来，后面的图片消失
		$imgLi.eq(index).stop().fadeIn().siblings().fadeOut();
		
		//数字添加样式
        $numLi.eq(index).addClass("active").stop().siblings().removeClass("active");

	});
	
}

//调用
changeImg2();