html部分：
<body>
<div class="box"> <div class="show"> <div class="list"> <ul class="clearfix oraign"> <li> <img src="img/1.jpg" /> <div class="text_box"> <p>2016冬装</p> <h3>韩庚同款</h3> <button>了解更多</button> </div> </li> <li> <img src="img/2.jpg" /> <div class="text_box"> <p>2016冬装</p> <h3>商务型格</h3> <button>了解更多</button> </div> </li> <li> <img src="img/3.jpg" /> <div class="text_box"> <p>2016冬装</p> <h3>特惠款</h3> <button>了解更多</button> </div> </li> <li> <img src="img/4.jpg" /> <div class="text_box"> <p>2016冬装</p> <h3>韩庚同款</h3> <button>了解更多</button> </div> </li> <li> <img src="img/5.jpg" /> <div class="text_box"> <p>2016冬装</p> <h3>商务型格</h3> <button>了解更多</button> </div> </li> <li> <img src="img/6.jpg" /> <div class="text_box"> <p>2016冬装</p> <h3>特惠款</h3> <button>了解更多</button> </div> </li> <li> <img src="img/7.jpg" /> <div class="text_box"> <p>2016冬装</p> <h3>韩庚同款</h3> <button>了解更多</button> </div> </li> <li> <img src="img/8.jpg" /> <div class="text_box"> <p>2016冬装</p> <h3>商务型格</h3> <button>了解更多</button> </div> </li> <li> <img src="img/9.jpg" /> <div class="text_box"> <p>2016冬装</p> <h3>特惠款</h3> <button>了解更多</button> </div> </li> </ul> </div> </div> <div class="prev"><</div> <div class="next">></div> </div> </body>css部分：
.clearfix:after{clear:both; height:0; visibility:hidden; content:"."; display:block;}
.box{width: 1095px; padding: 20px 0 20px 39px; margin: 50px; border: 1px solid #ccc; position: relative;}
.box .show{width: 1095px; height: 506px; position: relative; z-index: 10; overflow: hidden;}.box .show .list{width:6588px; position: absolute; left: 0px; top: 0;}.box .show .list ul{float: left;}.box .show .list li{width: 327px; float: left; margin-right: 39px; position: relative;}.box .show .list li img{display: block; width: 100%;}.box .next,.box .prev{height: 30px; width: 30px; position: absolute; top: calc(50% - 15px); color: #000000; font-weight: bold; font-size: 30px; line-height:30px; z-index: 1000; cursor: pointer;}.box .next{right: 0;}.box .prev{left: 0;}.box .text_box{width: 100%; background: rgba(255,255,255,0.6); position: absolute; left: 0; bottom: 81px;}.box .text_box p{font-size: 16px; text-align: center; color: #3d3d3d; line-height: 34px; font-family: 黑体;}.box .text_box h3{font-size: 24px; line-height: 24px; color: #3d3d3d; text-align: center; font-weight: 100; font-family: 微软雅黑;}.box .text_box button{display: block; line-height: 26px; font-size: 14px; color: #3d3d3d; border: 1px solid #898989; width: 115px; margin: 3px auto 28px auto;background: rgba(255,255,255,0.6);}.box .text_box button:hover{background: red; color: #ffffff; cursor: pointer;}
jq部分：
$(function(){
var num=0; var $width=366; // 每个li的宽度 $(".oraign").clone().appendTo('.list') //将ul在复制一份，放在class为.list的div里面 $('.next').click(function(){ if( !$('.list').is(":animated") ){ //判断class为.list的div目前是否在进行动画 if($('.list').css('left')=='-3294px'){ $('.list').css({left:'-0px'},500) //将class为.list的div重新定位，使它与前一步的图片完全重合，做到天衣无缝 } $('.list').stop(true,true).animate({left:'-='+$width},500) } }) $('.prev').click(function(){ if( !$('.list').is(":animated") ){ if($('.list').css('left')=='0px'){ $('.list').css({left:'-3294px'},500) } $('.list').stop(true,true).animate({left:'+='+$width},500) } })})