标签：水平 src pen round 图片 stop int 效果 www
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");
}
}
标签：水平 src pen round 图片 stop int 效果 www
原文地址：http://www.cnblogs.com/zjjDaily/p/6840456.html
