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:;
 }
 .right_btn{
 　　right:;
 }
 .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");
 　　}
 }