1.
1 <%@ page language="java" contentType="text/html; charset=UTF-8" 2 pageEncoding="UTF-8"%> 3 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 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 #direction { 25 margin: auto; 26 width: 460px; 27 } 28 .leftarrow { 29 margin-left: 20px; 30 margin-top: 10px; 31 width: 45px; 32 height: 45px; 33 } 34 .rightarrow { 35 margin-left: 290px; 36 margin-top: 10px; 37 width: 45px; 38 height: 45px; 39 } 40 </style> 41 <script src="jquery-1.5.2.js" type="text/javascript"></script> 42 <script type="text/javascript"> 43 $(document).ready( function() { 44 var $wrapper = $('#scroller a img'); 45 46 var leftanimator = function(imgblock) { 47 //jQuery animate() 方法允许您创建自定义的动画。 48 imgblock.animate({left:-310}, 1000); 49 } 50 51 var rightanimator = function(imgblock) { 52 imgblock.animate({left:0}, 1000); 53 } 54 55 $('.leftarrow').click(function(){ 56 leftanimator($wrapper); 57 }); 58 59 $('.rightarrow').click(function(){ 60 rightanimator($wrapper); 61 }); 62 63 $('.leftarrow').hover( 64 function(){ 65 $(this).css({width: $(this).width()+5,height: $(this).height()+5}); 66 }, 67 function() { 68 $(this).css({width: $(this).width()-5,height: $(this).height()-5}); 69 } 70 ); 71 72 $('.rightarrow').hover( 73 function(){ 74 $(this).css({width: $(this).width()+5,height: $(this).height()+5}); 75 }, 76 function() { 77 $(this).css({width: $(this).width()-5,height: $(this).height()-5}); 78 } 79 ); 80 81 }); 82 </script> 83 </head> 84 <body> 85 <div id="scroller"> 86 <div id="images"> 87 <a class="image" href="#"> 88 <img src="1.jpg" width=150px height=150px/> 89 </a> 90 <a class="image" href="#"> 91 <img src="2.jpg" width=150px height=150px/> 92 </a> 93 <a class="image" href="#"> 94 <img src="3.jpg" width=150px height=150px/> 95 </a> 96 <a class="image" href="#"> 97 <img src="4.jpg" width=150px height=150px/> 98 </a> 99 <a class="image" href="#"> 100 <img src="5.jpg" width=150px height=150px/> 101 </a> 102 </div> 103 </div> 104 105 <div id="direction"> 106 <img src="left.png" class="leftarrow" /> 107 <img src="right.png" class="rightarrow" /> 108 </div> 109 </body> 110 </html>
