学习篇：来点水货--要天天学习！！！ 

  1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2 <html xmlns="http://www.w3.org/1999/xhtml">
  3 <head>
  4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5 <title>Portfolio Image Rotator by Soh Tanaka</title>
  6 
  7 <style type="text/css">
  8 body {
  9     background: #222;
 10     margin: 0; padding: 0;
 11     font: normal 10px Verdana, Arial, Helvetica, sans-serif;
 12 }
 13 *{outline: none;}
 14 img {border: 0;}
 15 .container {
 16     width: 790px;
 17     padding: 0;
 18     margin: 0 auto;
 19 }
 20 .folio_block {
 21     position: absolute;
 22     left: 50%; top: 50%;
 23     margin: -140px 0 0 -395px;
 24 }
 25 
 26 
 27 /*--Main Container--*/
 28 .main_view {
 29     float: left;
 30     position: relative;
 31 }
 32 /*--Window/Masking Styles--*/
 33 .window {
 34     height:286px;    width: 790px;
 35     overflow: hidden; /*--Hides anything outside of the set width/height--*/
 36     position: relative;
 37 }
 38 .image_reel {
 39     position: absolute;
 40     top: 0; left: 0;
 41 }
 42 .image_reel img {float: left;}
 43 
 44 /*--Paging Styles--*/
 45 .paging {
 46     position: absolute;
 47     bottom: 40px; right: -7px;
 48     width: 178px; height:47px;
 49     z-index: 100; /*--Assures the paging stays on the top layer--*/
 50     text-align: center;
 51     line-height: 40px;
 52     background: url(paging_bg2.png) no-repeat;
 53     display: none; /*--Hidden by default, will be later shown with jQuery--*/
 54 }
 55 .paging a {
 56     padding: 5px;
 57     text-decoration: none;
 58     color: #fff;
 59 }
 60 .paging a.active {
 61     font-weight: bold; 
 62     background: #920000; 
 63     border: 1px solid #610000;
 64     -moz-border-radius: 3px;
 65     -khtml-border-radius: 3px;
 66     -webkit-border-radius: 3px;
 67 }
 68 .paging a:hover {font-weight: bold;}
 69 </style>
 70 
 71 </head>
 72 
 73 <body>
 74 <div class="container">
 75     
 76     <div class="folio_block">
 77         
 78         <div class="main_view">
 79             <div class="window">    
 80                 <div class="image_reel">
 81                     <a href="#"><img src="reel_1.jpg" alt="" /></a>
 82                     <a href="#"><img src="reel_2.jpg" alt="" /></a>
 83                     <a href="#"><img src="reel_3.jpg" alt="" /></a>
 84                     <a href="#"><img src="reel_4.jpg" alt="" /></a>
 85                 </div>
 86             </div>
 87             <div class="paging">
 88                 <a href="#" rel="1">1</a>
 89                 <a href="#" rel="2">2</a>
 90                 <a href="#" rel="3">3</a>
 91                 <a href="#" rel="4">4</a>
 92             </div>
 93         </div>
 94         <p style="color: #fff; margin: 10px 0; float: left; width: 100%;"><a href="http://www.sohtanaka.com/web-design/automatic-image-slider-w-css-jquery/" style="color: #fff; padding: 10px 0;">Automatic Image Slider with CSS &amp; jQuery</a> by Soh Tanaka</p>
 95     </div>    
 96 
 97 </div>
 98 
 99 
100 <script type="text/javascript" src="jquery-1.4.2.js"></script>
101 <script type="text/javascript">
102 
103 $(document).ready(function() {
104 
105     //Set Default State of each portfolio piece           //当文档载入后对其显示，且在第一个链接上面添加样式。
106     $(".paging").show("slow"); //   匹配的元素将被立即显示，没有动画。当提供一个持续时间参数，.show()成为一个动画方法。.show()方法将为匹配元素的宽度，高度，以及不透明度，同时进行动画。   在火狐中测试了。
107     $(".paging a:first").addClass("active");
108         
109     //Get size of images, how many there are, then determin the size of the image reel.
110     var imageWidth = $(".window").width();   //window的宽度为790px；是图片的宽度。
111     var imageSum = $(".image_reel img").size();   // 调用 .size() 来获取列表项的数目： 也可以使用 .length 属性来代替，他会略微快那么一点点。
112     var imageReelWidth = imageWidth * imageSum;    //真正的宽度为：一个宽度×图片数目。
113     
114     //Adjust the image reel to its new size
115     $(".image_reel").css({'width' : imageReelWidth});
116     
117     //Paging + Slider Function
118     rotate = function(){    
119         var triggerID = $active.attr("rel") - 1; //Get number of times to slide           //这里的$active 为文档载入后的第一个链接的兄弟节点： .padding a.active   .next();
120         var image_reelPosition = triggerID * imageWidth; //Determines the distance the image reel needs to slide
121 
122         $(".paging a").removeClass('active'); //Remove all active class
123         $active.addClass('active'); //Add active class (the $active is declared in the rotateSwitch function)
124         
125         //Slider Animation
126         $(".image_reel").animate({                //自定义动画方法
127             left: -image_reelPosition
128         }, 500 );
129         
130     }; 
131     
132     //Rotation + Timing Event
133     rotateSwitch = function(){        
134         play = setInterval(function(){ //Set timer - this will repeat itself every 3 seconds    //   setInterval（）；js方法。
135             $active = $('.paging a.active').next();
136             if ( $active.length === 0) { //If paging reaches the end...
137                 $active = $('.paging a:first'); //go back to first
138             }
139             rotate(); //Trigger the paging and slider function
140         }, 2000); //Timer speed in milliseconds (3 seconds)  这里是7秒。
141     };
142     
143     rotateSwitch(); //Run function on launch
144     
145     //On Hover    //注意这里是image_reel 里面的 a
146     $(".image_reel a").hover(function() {      //.hover( handlerIn(eventObject), handlerOut(eventObject) ) 将二个事件函数绑定到匹配元素上，分别当鼠标指针进入和离开元素时被执行
147         clearInterval(play); //Stop the rotation           //clearInterval() 方法可取消由 setInterval() 设置的 timeout。 clearInterval() 方法的参数必须是由 setInterval() 返回的 ID 值。
148     }, function() {
149         rotateSwitch(); //Resume rotation
150     });
151     
152     //On Click
153     $(".paging a").click(function() {    
154         $active = $(this); //Activate the clicked paging
155         //Reset Timer
156         clearInterval(play); //Stop the rotation
157         rotate(); //Trigger rotation immediately
158         rotateSwitch(); // Resume rotation
159         return false; //Prevent browser jump to link anchor
160     });    
161     
162 });
163 </script>
165 </body>
166 </html>
posted @ 2011-06-17 16:48  梅梅哇  阅读(218)  评论(0)  编辑  收藏  举报