jQuery案例之图片轮播

                                   用jQuery简单写图片轮播特效

一、HTML部分

	
	
		
		

			

			

			

			
	
		
		
		

			
美丽的草原
			
云里的小镇
			
出升的太阳
			
蔚蓝的湖泊
		
	
		
		

			

			

			

			

		

	
	
	
	
	

二、css部分（不包含公用样式）

/* CSS Document */
.picbox{
	width: 700px;
	height: 400px;
	margin: 0 auto;
	position: relative;
}
.picbox ul li{
	display: none;
}
.picbox ul:first-child{
	width: 100%;
	height: 100%;
}
.picbox ul li img{
	width: 100%;
	height: 100%;
}
.picbox ul:first-child li{
	width: 100%;
	height: 100%;
	float: left;
	position: absolute;
}
.picbox .current{
	display: block;
}

#content_bg{
	width: 700px;
	height: 60px;
	color:#fff;
	background: rgba(0,0,0,0.4);
	position: absolute;
	bottom: 0;	
	line-height: 60px;
}
#content_bg .bg{
	padding-left: 50px;
	display: block;
}

#circle {
	position:absolute;
	right:50px;
	bottom:20px;
}
#circle li {
	width:12px;
	height:12px;
	background-color:#fff;
	border-radius:50%;
	margin:0px 4px;
	display:inline-block;
	cursor:pointer;
}
#circle .current1 {
	background-color:#FF7E00;
	transition: all 0.4s;
	transform: scale(1.5,1.5);
}

三、jQuery部分（重点）

// JavaScript Document
$(document).ready(function(){
	var timer = null;
	var index = 0;
	var pic = $('.content li');
	var cir = $('#circle li');
	var bg = $('#content_bg li');
	
	/*轮播效果*/
	show();
	
	/*鼠标指向当前*/
    cir.mouseover(function() {
        index = $(this).index();
        begin();
    });
	
	/*鼠标放上图片按钮 停止轮播*/
	cir.mouseenter(function(){
		clearInterval(timer);
	});
	pic.mouseenter(function(){
		clearInterval(timer);
	});
	
	/*鼠标离开图片按钮 继续轮播*/
	cir.mouseleave(function(){
		show();
	});
	pic.mouseleave(function(){
		show();
	});
	
	/*轮播*/
	function show(){
		timer = setInterval(function(){
			begin();
			index++;
			if(index === 4){
				index = 0 ;
			}
		}, 2000);
	}
	/*更改样式*/
    function begin() {
        pic.eq(index).addClass('current').siblings().removeClass('current');
        cir.eq(index).addClass('current1').siblings().removeClass('current1');
		bg.eq(index).addClass('bg').siblings().removeClass('bg');
    }
	
	
	
});