标签：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> *{ margin: 0; padding: 0; } ul{ width: 10000px; } ul li{ float: left; list-style: none; } .container{ width: 560px; height: 300px; border:4px solid #000; margin: 0 auto; /*overflow: hidden;*/ } span{ display: inline-block; width: 50px; height: 50px; background-color:red; color:#fff; font-size: 30px; } </style> </head> <body> <div class="container"> <ul> <li><img src="1.jpg" alt=""></li> <li><img src="2.jpg" alt=""></li> <li><img src="3.jpg" alt=""></li> <li><img src="4.jpg" alt=""></li> <li><img src="1.jpg" alt=""></li> </ul> </div> <span class="zuoanniu">左按钮</span> <span class="youanniu">右按钮</span> <script src="jquery.min.js"></script> <script> var i=0; $(".youanniu").on(‘click‘,function(){ if(!$("ul").is(":animated")){//防止动画积累 i++; if(i<4){ $("ul").animate({‘margin-left‘:-560*i+‘px‘}) }else{ i=0; $("ul").animate({‘margin-left‘:-560*4+‘px‘},function(){ $("ul").css("margin-left",-560*i+‘px‘); }) } } }); $(".zuoanniu").on(‘click‘,function(){ if(!$("ul").is(‘:animated‘)){//防止动画积累 if(i>0){ i--; $("ul").animate({‘margin-left‘:-560*i+‘px‘}) }else{ i=3; $("ul").css("margin-left",-560*4+‘px‘); $("ul").animate({‘margin-left‘:-560*3+‘px‘}) } } }); </script> </body> </html>
具体目录结构是上面的这样的！！
实际用的时候
.container{
width: 560px;
height: 300px;
border:4px solid #000;
margin: 0 auto;
/*overflow: hidden;*/
}
overflow:hidden;加上！！！
ps:比较简单，适合初学者，仅仅是分享，各位多多提意见！！！谢谢~~~
标签：
原文地址：http://www.cnblogs.com/mona123/p/5485199.html
