1.
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>
