1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title>jquery动画滑动</title> 5 <style type="text/css"> 6 .list{ 7 border: 1px solid #b4b4b4; 8 width: 450px; 9 position: relative; 10 height: 150px; 11 overflow: hidden; 12 } 13 .box{ 14 position: absolute; 15 width: 100%; 16 font-size: 0; 17 white-space:nowrap; 18 } 19 .div{ 20 padding: 10px; 21 width: 130px; 22 height: 130px; 23 display: inline-block; 24 } 25 .div img{ 26 width: 100%; 27 height: 100%; 28 object-fit: cover; 29 } 30 .next,.pre{ 31 cursor:pointer; 32 } 33 </style> 34 <script type="text/javascript" src="http://mat1.gtimg.com/libs/jquery/1.12.0/jquery.js"></script> 35 </head> 36 <body> 37 <div class="list"> 38 <div class="box"> 39 <div class="div"> 40 <img src="http://img.esthetics.cn/Uploads/Picture/2018-09-14/5b9b7f9428173.jpg" /> 41 </div> 42 <div class="div"> 43 <img src="http://img.esthetics.cn/Uploads/Picture/2018-09-14/5b9b7f9428173.jpg" /> 44 </div> 45 <div class="div"> 46 <img src="http://img.esthetics.cn/Uploads/Picture/2018-09-14/5b9b7f9428173.jpg" /> 47 </div> 48 <div class="div"> 49 <img src="http://img.esthetics.cn/Uploads/Picture/2018-09-14/5b9b7f9428173.jpg" /> 50 </div> 51 <div class="div"> 52 <img src="http://img.esthetics.cn/Uploads/Picture/2018-09-14/5b9b7f9428173.jpg" /> 53 </div> 54 </div> 55 </div> 56 <div> 57 <span class="pre">上一个</span> 58 <span class="next">下一个</span> 59 </div> 60 <script type="text/javascript"> 61 var ord = 0; 62 function changeTo(ord){ 63 $(".list .box").stop(true,false).animate({ "left" : -ord*150},1000); 64 } 65 $(".pre").click(function (ev) { 66 ord = ord > 0 ? --ord : $(".div").length -1; 67 changeTo(ord); 68 }); 69 $(".next").click(function (ev) { 70 ord = ord < ($(".div").length-1)? ++ord : 0; 71 changeTo(ord); 72 }); 73 </script> 74 </body> 75 </html>
