banner无缝滚动动画，支持左右按钮和小点

HTML：

<div class="box">
　　<ul>
　　　　<li class="img_cur" >
　　　　　　<a href="#">
　　　　　　　　<img src="img/banner.jpg">
　　　　　　</a>
　　　　</li>
　　　　<li>
　　　　　　<a href="#">
　　　　　　　　<img src="img/banner2.jpg">
　　　　　　</a>
　　　　</li>
　　　　<li>
　　　　　　<a href="#">
　　　　　　　　<img src="img/banner3.jpg">
　　　　　　</a>
　　　　</li>
　　　　<li>
　　　　　　<a href="#">
　　　　　　　　<img src="img/banner4.jpg">
　　　　　　</a>
　　　　</li>
　　</ul>
　　<ol>
　　　　<li class="cur"></li>　　　　//这里li只写一个是为了js加入其它的li，为了以后再加入图片时不会再来增加li
　　</ol>
　　<div class="left_btn btn"><</div>
　　<div class="right_btn btn">></div>
</div> 

CSS：

.box{
　　width: 844px;
　　height: 380px;　　
　　margin: 100px auto;
　　overflow: hidden;
　　position: relative;
}
.box>ul{
　　position: absolute;
　　top: 0px;
　　left: 0px;
　　clear: both;
　　overflow: hidden;
}
.box>ul>li{

　　float: left;
}
.btn{
　　position: absolute;
　　top: 0px;
　　bottom: 0px;
　　margin: auto 0;
　　width: 50px;
　　height: 50px;
　　text-align: center;
　　line-height: 50px;
　　background: black;
　　color: white;
}
.left_btn{
　　left: 0;
}
.right_btn{
　　right: 0;
}
.box>ol{
　　clear: both;
　　overflow: hidden;
　　position: absolute;
　　bottom: 10px;
　　left: 0px;
　　right: 0px;
　　margin: 0 auto;
}
.box>ol>li{
　　width: 10px;
　　height: 10px;
　　margin-right: 10px;
　　background: white;
　　float: left;
}
.box>ol>li.cur{
　　background: red;
}

注意：左按钮与右按钮和ol使用的垂直水平居中不支持ie8以下。可参考我的另外篇文章：http://www.cnblogs.com/zjjDaily/p/5952723.html

js:

var idx=0;     //定义一个全局变量
$(function(){

　　var clone_img=$(".box>ul>li").eq(0).clone().removeClass("img_cur");    //img_cur表示索引所在位置。克隆第一个li元素并去掉img_cur
　　$(".box>ul").append(clone_img);     //把它加到最后，克隆该元素是为了在动画执行到最后一张的时候，left值突然置为0，动画会闪动，为了防止这种情况，就添加第一个元素到最后，这样就不会看到闪动了，欺骗了眼睛。。。

　　var li_len=$(".box>ul>li").size();     //获取li的个数
　　var li_w=$(".box>ul>li").width();      //获取每个li的宽度
　　var ul_w=li_len*li_w;　　　　　　　　
　　$(".box>ul").css("width",ul_w);　　　　//设置ul的宽度


　　if(li_len>1){                                               //当li的个数大于一个时才添加
　　　　for(var i=0;i<(li_len-2);i++){　　　　　　　　//循环添加ol里面li的个数，因为原来有一个，所以要减2
　　　　　　$("ol").append("<li>"+"</li>")　　　　　　
　　　　}
　　}
　　var ol_len=$("ol>li").size();
　　var ol_marg=parseInt($("ol>li").css("margin-right"));        //因为每个ol里面的li都有margin-right，所以要算进去
　　var ol_li_w=$("ol>li").width();
　　var ol_w=ol_len*(ol_li_w+ol_marg);
　　$(".box>ol").css("width",ol_w);　　　　　　　　　　　　　　　//设置ol的宽度

$(".box").hover(function(){
　　clearInterval(timer);             
},function(){
　　timer=setInterval(function(){　　　　　//注意，这里timer前面一定不要加var哦，不然反复移入移出会导致动画越来越快。因为加了var之后每次移出开启定时器的时候它都会定义一个定时器，都会加1，之后就累加了。一开始是var timer=1，之后var timer=2.
　　　　img_banner("right");　　
　　},2000)
})

var timer=setInterval(function(){
　　img_banner("right");　　　　　　　　　　　　　　　　　　//此时传入函数的参数为right是因为自动轮播的效果和右按钮点击一样，动画往左移动。
},2000)


$(".left_btn").click(function(){
　　img_banner("left");
})
$(".right_btn").click(function(){
　　img_banner("right");
})

$(".box>ol>li").click(function(){
　　var this_idx=$(this).index();        //获取当前点击元素的索引

　　var li_len=$(".box>ul>li").size();
　　var li_w=$(".box>ul>li").width();
　　var left= -this_idx*li_w;                       //获取ul要移动的left的值

　　idx=this_idx;                                    //把当前索引值赋给idx，让动画获取正确的索引值
　　$(this).addClass('cur').siblings().removeClass("cur");　　　　//为当前点击的元素加上cur
　　$(".box>ul").stop(true,true).animate({"left":left},1500,function(){
　　　　$('.box>ul>li').eq(idx).addClass('img_cur').siblings().removeClass("img_cur");      //为当前正确索引的ul里的li添加img_cur
　　});
})

})
function img_banner(direct){　　　　　　　　　　　　　　　　　//传入一个参数

　　var li_len=$(".box>ul>li").size();
　　var li_w=$(".box>ul>li").width();
　　if(direct=="left"){                                                         //如果是左按钮点击，动画往右移动的话，idx就自减
　　　　if(idx==0){　　　　　　　　　　　　　　　　　　　　//如果当前索引为0
　　　　　　$(".box>ul").css("left",-(li_len-1)*li_w);　　　　　　//设置ul的left值，大小为除开克隆元素的ul的宽度值
　　　　　　idx=li_len-1;　　　　　　　　　　　　　　　　//此时索引为克隆元素的索引
　　　　}
　　　　idx--;　　　　　　　　　　　　　　　　//左按钮点一次，索引就减一
　　}else{　　　　　　　　　　　　　　　　　　　　　　　　　　//如果是右按钮点击，动画往左移动的话
　　　　if(idx==li_len-1){　　　　　　　　　　　　　　　　　　　//　当索引达到克隆元素的位置时
　　　　　　$(".box>ul").css("left",0);　　　　　　　　　　　　　　//整个ul的left值设置为0
　　　　　　idx=0;　　　　　　　　　　　　　　　　　　　　　　　　//此时索引值也为0
　　　　}
　　　　idx++;　　　　　　　　　　　　　　//右按钮点一次，索引就加一

　　}
　　var left=-idx*li_w;　　　　　　　　　　//此时ul需要移动的left值
　　$(".box>ul").stop(true,true).animate({"left":left},1500,function(){
　　　　$('.box>ul>li').eq(idx).addClass('img_cur').siblings().removeClass("img_cur");
　　});
　　if(idx==li_len-1){　　　　　　　　　　//当索引值达到克隆元素的位置时，此时应该是ol的第一个li元素加上cur。
　　　　$(".box>ol>li").eq(0).addClass('cur').siblings().removeClass("cur");
　　}else{
　　　　$(".box>ol>li").eq(idx).addClass('cur').siblings().removeClass("cur");
　　}
}