html部分代码
<div class="box">
<div class="box_wheel">
<ul class="box_ul">
<li style="background: pink;">AAA</li>
<li style="background: red;">BBB</li>
<li style="background: orange;">CCC</li>
<li style="background: brown;">DDD</li>
</ul>
</div>
<div class="btn btn_left"><</div>
<div class="btn btn_right">></div>
</div>
css部分代码
*{padding: 0;margin: 0;}
li{list-style: none;}
.box{width: 800px;height: 300px;border: 1px solid red;margin: 80px auto;position: relative;}
.box_wheel{width: 800px;height: 300px;overflow: hidden;}
.btn{width: 50px;height: 60px;background: bisque;line-height: 60px;text-align: center;color: red;font-size: 30px;cursor: pointer;}
.btn_left{position: absolute;left: -60px;top: 50%;margin-top: -30px;}
.btn_right{position: absolute;right: -60px;top: 50%;margin-top: -30px;}
.box_ul{height: 300px;}
.box_ul li{width:260px;height: 300px;margin-right: 10px;float: left;line-height: 300px;text-align: center;}
js部分代码
<script type="text/javascript">
//li元素的宽(包括padding,margin,border)
var liW = $('.box_ul li').outerWidth(true)
var len = $('.box_ul li').length
$('.box_ul').css("width",liW*len)
var flag = true
$(".btn_left").click(function(){
if(flag){
flag = false
$('.box_ul').find("li").eq(len-1).prependTo($('.box_ul'))
$('.box_ul').css({"marginLeft":-liW}).delay(8).queue(function(){
$('.box_ul').animate({"marginLeft":0})
flag = true
$(this).dequeue();
})
}
})
$(".btn_right").click(function(){
if(flag){
flag = false
$('.box_ul').animate({"marginLeft":-liW}).delay(8).queue(function(){
$('.box_ul').find("li").eq(0).appendTo($('.box_ul'))
$('.box_ul').css({"marginLeft":0})
flag = true
$(this).dequeue();
})
}
})
</script>