jQuery无缝轮播图代码

// html 代码
<div class="banner">
    <ul class="img">
        <li><a href="#"><img src="image/1.jpg"></a></li>
        <li><a href="#"><img src="image/2.jpg"></a></li>
        <li><a href="#"><img src="image/3.jpg"></a></li>
        <li><a href="#"><img src="image/4.jpg"></a></li>
    </ul>

    <ul class="num">
    </ul>
    <div class="btn btn_l">&lt;</div>
    <div class="btn btn_r">&gt;</div>
</div>

// jq 代码
$(function(){
	var i=0;
	var clone=$(".banner .img li").first().clone();
	$(".banner .img").append(clone);
	var size = $(".banner .img li").size();
	for(var j=0;j<size-1;j++){
		$(".banner .num").append("<li></li>");
	}
	$(".banner .num li").first().addClass('on');
	//鼠标划入圆点
	$(".banner .num li").hover(function(){
		var index=$(this).index();
		i=index;
		$(".banner .img").stop().animate({left:-index*1000},500);
		$(this).addClass('on').siblings().removeClass('on');
	})

	/*自动轮播*/
	var t=setInterval(function(){
		i++;
		move();
	},2000);

	//对banner定时器的操作
	$(".banner").hover(function(){
		clearInterval(t);
	},function(){
		t=setInterval(move(),2000);
	})


	/*向左按钮*/
	$(".banner .btn_l").click(function(){
		i++;
		move();
	})
	/*向右按钮*/
	$(".banner .btn_r").click(function(){
		i--;
		move();
	})

	function move(){
		if(i==size){
			$(".banner .img").css({left:0});
			i=1;
		}
		if(i==-1){
			$(".banner .img").css({left:-(size-1)*1000});
			i=size-2;
		}

		$(".banner .img").stop().animate({left:-i*1000},500);

		if(i==size-1){
			$(".banner .num li").eq(0).addClass('on').siblings().removeClass('on');
		}else{
			$(".banner .num li").eq(i).addClass('on').siblings().removeClass('on');
		}
	}
})
// style 样式
<style>
*{padding:0;margin:0;list-style: none;}
.banner{
	margin:100px auto; 
	border:5px solid #000; 
	width:1000px;
	height:640px;
	position: relative;
	overflow: hidden;
}
.banner .img{
	width:5000px;
	position: absolute;
	left:0px;
	top:0px;

}
.banner .img li{
	float:left;
}
.banner .num{
	position:absolute;
	width:100%;
	bottom:20px;
	left:0px;
	text-align: center;
	font-size: 0px;
}
.banner .num li{
	width:10px;
	height:10px;
	background: #888;
	border-radius: 50%;
	display: inline-block;
	margin:0 3px;
	cursor: pointer;

}
.banner .num li.on{
	background: #f00;
}
.banner .btn{
	width:30px;
	height:50px;
	background: rgba(0,0,0,0.5);
	position:absolute;
	top:50%;
	margin-top:-25px;
	cursor: pointer;
	text-align: center;
	line-height: 50px;
	color:#fff;
	font-size: 40px;
	font-family: "宋体";
	display: none;
}
.banner:hover .btn{
	display: block;
}
.banner .btn_l{
	left:0px;
}
.banner .btn_r{
	right:0px;
}
</style>