jquery 轮播图

html

		<!--轮播-->
		<div class="lun" style="margin-top: none;">

			<div id="lun_b" style="background-color:#ff9801;"></div>
			<ul id="lun_t">
				<li><img src="static/images/ad1.jpg"></li>
				<li><img src="static/images/ad2.jpg"></li>
				<li><img src="static/images/ad3.jpg"></li>
				<li><img src="static/images/ad4.jpg"></li>
			</ul>
		    <ul id="dian">
				<li>&nbsp;</li>
				<li>&nbsp;</li>
				<li>&nbsp;</li>
				<li>&nbsp;</li>
			</ul>
			
		</div>

css

.lun {
	position: relative;
	margin-left: 0;
	margin-top: 0;
	margin-right:100px;
	padding: 0;
}
.lun ul{
	position: absolute;
	list-style-type: none;
	margin: 0;
}
.lun li{
	
	display: inline-block;
}

.lun img{
	width: 954px;
	left:50%;
	margin-left: 230px;
}
.lun #lun_b{
	background: red;
	position: absolute;
	height: 430px;
	width: 1315px;
}

#lun_t li{
	position: absolute;
}

#dian{
	margin-left: 560px;
	margin-top: 400px;
}
#dian li{ 
	background-color: darkgray;
	font-size: 10px;
	width:10px;
	height: 10px;
	margin: 5px;
	cursor: pointer;
	border-radius: 50%;
}

#dian li:hover{
	background-color: grey;
}
.dian_color{
	background-color: dodgerblue;
}

jquery

 $(function(){
	    	var time = 0;
	    	var color = ["#55be59","#f44661","#0f1024","#ff9801"];
	    	$("#dian li").first().css("background-color","blue");
	    	
	    	$("#dian li").mouseover(function(){
	    		i = $(this).index();
	    		$("#lun_t li").eq(i).fadeIn(2000).siblings().fadeOut(1000);
	    	    $("#lun_b").css("background-color",color[i]);
	    	    $("#dian li").eq(i).css("background-color","blue").siblings().css("background-color","darkgray")
	    	    time = i;
	    	    console.log(time);
	    	});
	    	
	    	//图片轮播
	    	var t = setInterval(move,5000);
	    	function move(){
	    		time++;
	    		if(time==4){
	    			time=0;
	    		}
	    		$("#lun_t li").eq(time).fadeIn(2000).siblings().fadeOut(1000);
	    	    $("#lun_b").css("background-color",color[time]);
	    	    $("#dian li").eq(time).css("background-color","blue").siblings().css("background-color","darkgray")
	    	}
	    	
	    	$("#lun_t img").hover(function () {
	    		console.log("hahah");
	    		clearInterval(t);
	    		
	    	},function () {
	    		console.log("ooooo");
	    		t = setInterval(move,5000);
	    		
	    	});
	 })