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 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; 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 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; 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 & 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>