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>