jq动画实现左右滑动 

 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>

posted @ 2019-03-01 17:27  智走  阅读(871)  评论(0)    收藏  举报