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>
<a href="#">
<img src="img/banner3.jpg">
</a>
</li>
<li>
<a href="#">
<img src="img/banner4.jpg">
</a>
</li>
</ul>
<ol>
</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;
}
.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");
}
}
banner無縫滾動動畫，支持左右按鈕和小點