jquery实现特效之使用数组滚动图片animate

 1 <%@ page language="java" contentType="text/html; charset=UTF-8"
 2     pageEncoding="UTF-8"%>
 3 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
 4 <html>
 5     <head>
 6         <meta http-equiv="Content-Type" content="text/html;charset=utf-8">
 7         <title>特效之使用数组滚动图片</title>
 8         <style type="text/css">
 9             #scroller {
10                 position: relative;
11                 height: 150px;
12                 width: 460px;
13                 overflow: hidden;
14             /*text-align用于设置它包含的内联元素居中*/
15                 margin: auto;
16             }
17             #images {
18                 width: 770px;
19             }
20             #images a img {
21                 border: 0;
22                 position: relative;/*此处相对定位是为了方便下面图片切换*/
23             }
24         </style>
25         <script src="jquery-1.5.2.js" type="text/javascript"></script>
26         <script type="text/javascript">
27             $(document).ready( function() {
28                 var $pic = $('#scroller a img');
29                 var num = $pic.length;
30                 for(var i=0;i<num;i++) {
31                     var next = $pic.eq(i);
32                     //实现图片滚动
33                     scroll(next, -770);
34                     if(i==num-1) {
35                         for(i=0;i<num;i++) {
36                             next = $pic.eq(i);
37                             //实现图片反滚动
38                             scroll(next, 0);
39                         }
40                     }
41                 }
42             });
43             
44             //step表示移动的跨度
45             function scroll(im, step) {
46                 im.animate({'left':step}, 5000);
47             }
48         </script>
49     </head>
50     <body>
51         <div id="scroller">
52             <div id="images">
53                 <a class="image" href="#">
54                     <img src="1.jpg" width=150px height=150px/>
55                 </a>
56                 <a class="image" href="#">
57                     <img src="2.jpg" width=150px height=150px/>
58                 </a>
59                 <a class="image" href="#">
60                     <img src="3.jpg" width=150px height=150px/>
61                 </a>
62                 <a class="image" href="#">
63                     <img src="4.jpg" width=150px height=150px/>
64                 </a>
65                 <a class="image" href="#">
66                     <img src="5.jpg" width=150px height=150px/>
67                 </a>
68             </div>
69         </div>
70     </body>
71 </html>
posted on 2017-01-21 21:49 Sharpest 阅读(253) 评论(0) 收藏举报