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>