jquery实现无缝图片轮播

原型展示

html设置

<div class="f_div">

    <ul class="img">
    </ul>
    
    <!--小圆点 -->
    <ul class="radio">    	
    </ul>
    
    <!--左右箭头 -->
    <div class="btn btn_l"><</div>
    <div class="btn btn_r">></div>

</div>

css样式

*{ padding:0; margin:0; list-style:none;}
.f_div{ margin:100px auto; border:5px solid #000; width:550px; height:300px; overflow:hidden; position:relative;}
.f_div .img{ width:5000px; position:absolute; left:0px; top:0;}
.f_div .img li{ float:left;}

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

.f_div .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;}
.f_div:hover .btn{ display:block;}

.f_div .btn_l{ left:0;}
.f_div .btn_r{ right:0;}

jquery设置

初始化图片和小圆点数量

        var i=0;
        var Arrayimg = {};
	Arrayimg[0] = "images/1.jpg";
	Arrayimg[1] = "images/2.jpg";
	Arrayimg[2] = "images/3.jpg";
	Arrayimg[3] = "images/4.jpg";

	for(var j=0;j<5;j++){
		if(j<4){
			var img = Arrayimg[j];
		}
		else
			img = Arrayimg[0];
		$(".f_div .img").append('<li><a href="#"><img src="'+img+'"/></a></li>');
	}
	var size=$(".f_div .img li").size();	

	/*加载小圆点*/
	for(var j=0;j<size-1;j++){
		$(".f_div .radio").append("<li></li>");
	}
	$(".f_div .radio li").first().addClass("on");

鼠标悬浮在圆点上的事件

/*鼠标划入圆点*/
	$(".f_div .radio li").hover(function(){
		var index=$(this).index();
		i=index;
		$(".f_div .img").stop().animate({left:-index*550},500)	/*定义图片每次滑动的距离*/
		$(this).addClass("on").siblings().removeClass("on")		
	})

无操作状态下的图片自动滚动

	var t=setInterval(function(){
		i++;
		move()
	},2000)

定时器的设置

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

点击向左向右按钮的事件

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

图片滑动的总算法

function move(){
		
		if(i==size){
			$(".f_div  .img").css({left:0})			
			i=1;
		}
		
		
		if(i==-1){
			$(".f_div .img").css({left:-(size-1)*550})
			i=size-2;
		}
		
		$(".f_div .img").stop().animate({left:-i*550},500)	
		
		if(i==size-1){
			$(".f_div .radio li").eq(0).addClass("on").siblings().removeClass("on")	
		}else{		
			$(".f .radio li").eq(i).addClass("on").siblings().removeClass("on")	
		}