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>jQuery插件timers定时器</title>
6 <script language="javascript" src="js/jquery-1.4.4.min.js" type="text/javascript"></script>
7 <script language="javascript" src="js/jquery.timers.js" type="text/javascript"></script>
8 <style type="text/css">
9 body {
10 text-align : center ;
11 }
12 .cgpic1 ,.cgpic2 {
13 float : left ;
14 }
15 .box,box2 {
16 position : relative ;
17 width : 350px ;
18 height : 240px ;
19 margin : 0 auto ;
20 }
21 .box div a img {
22 max-width : 300px ;
23 width : 300px ;
24 width : expression_r(document.body.clientWidth>300?"300px", "auto") ;
25 overflow : hidden ;
26 height : 240px ;
27 position : absolute ;
28 }
29 .box2 div a img {
30 max-width : 300px ;
31 width : 300px ;
32 width : expression_r(document.body.clientWidth>300?"300px", "auto") ;
33 overflow : hidden ;
34 height : 240px ;
35 position : relative ;
36 }
37 .num {
38 position : relative ;
39 }
40 .num2 {
41 margin : 0 auto ;
42 position : relative ;
43 width : 300px ;
44 background : #009933 ; }
45 .num span,num2 span {
46 padding : 0 5px ;
47 }
48 .fontsty {
49 font-weight : bold ;
50 color : red ; }
51 .ctr span {
52 background-color : #6666CC ; }
53 </style>
54 <script type="text/ecmascript" language="javascript">
55 $(function() {
56 var i=0;
57 var $div=$(".box>div");
58 var $span=$(".num>span");
59 /* 第一个div 显示，其余隐藏 */
60 $div.hide();
61 $div.first().show();
62 /* $($div[0]).show(); */
63 /* 自动切换函数 */
64 function auto(){
65 i<$div.length-1?i++ : i=0 ;
66 $div.eq(i).fadeIn("slow").siblings().fadeOut("slow"); /* 谈入谈出效果 */
67 /* $div.eq(i).show().siblings().hide(); */ /* siblings 同级元素隐藏除去i等于div中的索引 */
68 $span.eq(i).addClass("fontsty").siblings().removeClass("fontsty"); /* span中的样式显示与隐藏 */
69 }
70 /* 自动执行 */
71 $(".cgpic1").everyTime("1s","a",auto);
72 /* 停止执行 */
73 $(".cgpic1 .stop").click(function() {
74 $(".cgpic1").stopTime("a");
75 } );
76 $(".cgpic1 .start").click(function() {
77 $(".cgpic1").everyTime("1s","a",auto);
78 } );
79 /* 鼠标移上数字事件 */
80 $span.mouseover(function() {
81 $(".cgpic1").stopTime("a");
82 i=$(this).index();
83 $div.eq(i).show().siblings().hide();
84 $span.eq(i).addClass("fontsty").siblings().removeClass("fontsty");
85 $(".cgpic1").everyTime("1s","a",auto);
86 } );
87
88
89 var n=0;
90 var $div2=$(".box2>div");
91 var $span2=$(".num2>span");
92 /* 第一个div 显示，其余隐藏 */
93 $div2.hide();
94 $div2.first().show();
95 /* $($div[0]).show(); */
96 /* 自动切换函数 */
97 function auto2() {
98 n<$div2.length-1?n++ : n=0 ;
99 /* $div.eq(i).fadeIn("slow").siblings().fadeOut("slow"); */ /* 谈入谈出效果 */
100 $div2.eq(n).show().siblings().hide(); /* siblings 同级元素隐藏除去i等于div中的索引 */
101 $span2.eq(n).addClass("fontsty").siblings().removeClass("fontsty"); /* span中的样式显示与隐藏 */
102 }
103 /* 自动执行 */
104 $(".cgpic2").everyTime("2s","b",auto2);
105 /* 停止执行 */
106 $(".cgpic2 .stop").click(function() {
107 $(".cgpic2").stopTime("b");
108 } );
109 $(".cgpic2 .start").click(function() {
110 $(".cgpic2").everyTime("2s","b",auto2);
111 } );
112 /* 鼠标移上数字事件 */
113 $span2.mouseover(function() {
114 $(".cgpic2").stopTime("b");
115 n=$(this).index();
116 $div2.eq(n).show().siblings().hide();
117 $span2.eq(n).addClass("fontsty").siblings().removeClass("fontsty");
118 $(".cgpic2").everyTime("2s","b",auto2);
119 } );
120 })
121 </script>
122 </head>
123
124 <body>
125 <!--切换的图片-->
126 <div class="cgpic1">
127 <div class="box">
128 <div><a href="#"><img src="img/1.jpg"/></a></div>
129 <div> <a href="#"><img src="img/2.jpg" /></a></div>
130 <div><a href="#"><img src="img/3.jpg" /></a></div>
131 <div><a href="#"><img src="img/4.jpg" /></a></div>
132 <div><a href="#"><img src="img/5.jpg" /></a></div>
133 <div><a href="#"><img src="img/6.jpg" /></a></div>
134 <div><a href="#"><img src="img/7.jpg" /></a></div>
135 <div><a href="#"><img src="img/8.jpg" /></a></div>
136 </div>
137 <!--数字-->
138 <div class="num">
139 <span class="fontsty"><a href="#">1</a></span>
140 <span><a href="#">2</a></span>
141 <span><a href="#">3</a></span>
142 <span><a href="#">4</a></span>
143 <span><a href="#">5</a></span>
144 <span><a href="#">6</a></span>
145 <span><a href="#">7</a></span>
146 <span><a href="#">8</a></span>
147 </div>
148 <button class="stop" value="停止" >停止</button>
149 <button class="start" value="播放" >播放</button>
150 </div>
151 <div class="cgpic2">
152 <div class="box2">
153 <div><a href="#"><img src="img/1.jpg"/></a></div>
154 <div> <a href="#"><img src="img/2.jpg" /></a></div>
155 <div><a href="#"><img src="img/3.jpg" /></a></div>
156 <div><a href="#"><img src="img/4.jpg" /></a></div>
157 <div><a href="#"><img src="img/5.jpg" /></a></div>
158 <div><a href="#"><img src="img/6.jpg" /></a></div>
159 <div><a href="#"><img src="img/7.jpg" /></a></div>
160 <div><a href="#"><img src="img/8.jpg" /></a></div>
161 </div>
162 <!--数字-->
163 <div class="num2">
164 <span class="fontsty"><a href="#">1</a></span>
165 <span><a href="#">2</a></span>
166 <span><a href="#">3</a></span>
167 <span><a href="#">4</a></span>
168 <span><a href="#">5</a></span>
169 <span><a href="#">6</a></span>
170 <span><a href="#">7</a></span>
171 <span><a href="#">8</a></span>
172 </div>
173 <button class="stop" value="停止" >停止</button>
174 <button class="start" value="播放" >播放</button>
175 </div>
176
177
178 </body>
179 </html>
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>jQuery插件timers定时器</title>
6 <script language="javascript" src="js/jquery-1.4.4.min.js" type="text/javascript"></script>
7 <script language="javascript" src="js/jquery.timers.js" type="text/javascript"></script>
8 <style type="text/css">
9 body {
10 text-align : center ;
11 }
12 .cgpic1 ,.cgpic2 {
13 float : left ;
14 }
15 .box,box2 {
16 position : relative ;
17 width : 350px ;
18 height : 240px ;
19 margin : 0 auto ;
20 }
21 .box div a img {
22 max-width : 300px ;
23 width : 300px ;
24 width : expression_r(document.body.clientWidth>300?"300px", "auto") ;
25 overflow : hidden ;
26 height : 240px ;
27 position : absolute ;
28 }
29 .box2 div a img {
30 max-width : 300px ;
31 width : 300px ;
32 width : expression_r(document.body.clientWidth>300?"300px", "auto") ;
33 overflow : hidden ;
34 height : 240px ;
35 position : relative ;
36 }
37 .num {
38 position : relative ;
39 }
40 .num2 {
41 margin : 0 auto ;
42 position : relative ;
43 width : 300px ;
44 background : #009933 ; }
45 .num span,num2 span {
46 padding : 0 5px ;
47 }
48 .fontsty {
49 font-weight : bold ;
50 color : red ; }
51 .ctr span {
52 background-color : #6666CC ; }
53 </style>
54 <script type="text/ecmascript" language="javascript">
55 $(function() {
56 var i=0;
57 var $div=$(".box>div");
58 var $span=$(".num>span");
59 /* 第一个div 显示，其余隐藏 */
60 $div.hide();
61 $div.first().show();
62 /* $($div[0]).show(); */
63 /* 自动切换函数 */
64 function auto(){
65 i<$div.length-1?i++ : i=0 ;
66 $div.eq(i).fadeIn("slow").siblings().fadeOut("slow"); /* 谈入谈出效果 */
67 /* $div.eq(i).show().siblings().hide(); */ /* siblings 同级元素隐藏除去i等于div中的索引 */
68 $span.eq(i).addClass("fontsty").siblings().removeClass("fontsty"); /* span中的样式显示与隐藏 */
69 }
70 /* 自动执行 */
71 $(".cgpic1").everyTime("1s","a",auto);
72 /* 停止执行 */
73 $(".cgpic1 .stop").click(function() {
74 $(".cgpic1").stopTime("a");
75 } );
76 $(".cgpic1 .start").click(function() {
77 $(".cgpic1").everyTime("1s","a",auto);
78 } );
79 /* 鼠标移上数字事件 */
80 $span.mouseover(function() {
81 $(".cgpic1").stopTime("a");
82 i=$(this).index();
83 $div.eq(i).show().siblings().hide();
84 $span.eq(i).addClass("fontsty").siblings().removeClass("fontsty");
85 $(".cgpic1").everyTime("1s","a",auto);
86 } );
87
88
89 var n=0;
90 var $div2=$(".box2>div");
91 var $span2=$(".num2>span");
92 /* 第一个div 显示，其余隐藏 */
93 $div2.hide();
94 $div2.first().show();
95 /* $($div[0]).show(); */
96 /* 自动切换函数 */
97 function auto2() {
98 n<$div2.length-1?n++ : n=0 ;
99 /* $div.eq(i).fadeIn("slow").siblings().fadeOut("slow"); */ /* 谈入谈出效果 */
100 $div2.eq(n).show().siblings().hide(); /* siblings 同级元素隐藏除去i等于div中的索引 */
101 $span2.eq(n).addClass("fontsty").siblings().removeClass("fontsty"); /* span中的样式显示与隐藏 */
102 }
103 /* 自动执行 */
104 $(".cgpic2").everyTime("2s","b",auto2);
105 /* 停止执行 */
106 $(".cgpic2 .stop").click(function() {
107 $(".cgpic2").stopTime("b");
108 } );
109 $(".cgpic2 .start").click(function() {
110 $(".cgpic2").everyTime("2s","b",auto2);
111 } );
112 /* 鼠标移上数字事件 */
113 $span2.mouseover(function() {
114 $(".cgpic2").stopTime("b");
115 n=$(this).index();
116 $div2.eq(n).show().siblings().hide();
117 $span2.eq(n).addClass("fontsty").siblings().removeClass("fontsty");
118 $(".cgpic2").everyTime("2s","b",auto2);
119 } );
120 })
121 </script>
122 </head>
123
124 <body>
125 <!--切换的图片-->
126 <div class="cgpic1">
127 <div class="box">
128 <div><a href="#"><img src="img/1.jpg"/></a></div>
129 <div> <a href="#"><img src="img/2.jpg" /></a></div>
130 <div><a href="#"><img src="img/3.jpg" /></a></div>
131 <div><a href="#"><img src="img/4.jpg" /></a></div>
132 <div><a href="#"><img src="img/5.jpg" /></a></div>
133 <div><a href="#"><img src="img/6.jpg" /></a></div>
134 <div><a href="#"><img src="img/7.jpg" /></a></div>
135 <div><a href="#"><img src="img/8.jpg" /></a></div>
136 </div>
137 <!--数字-->
138 <div class="num">
139 <span class="fontsty"><a href="#">1</a></span>
140 <span><a href="#">2</a></span>
141 <span><a href="#">3</a></span>
142 <span><a href="#">4</a></span>
143 <span><a href="#">5</a></span>
144 <span><a href="#">6</a></span>
145 <span><a href="#">7</a></span>
146 <span><a href="#">8</a></span>
147 </div>
148 <button class="stop" value="停止" >停止</button>
149 <button class="start" value="播放" >播放</button>
150 </div>
151 <div class="cgpic2">
152 <div class="box2">
153 <div><a href="#"><img src="img/1.jpg"/></a></div>
154 <div> <a href="#"><img src="img/2.jpg" /></a></div>
155 <div><a href="#"><img src="img/3.jpg" /></a></div>
156 <div><a href="#"><img src="img/4.jpg" /></a></div>
157 <div><a href="#"><img src="img/5.jpg" /></a></div>
158 <div><a href="#"><img src="img/6.jpg" /></a></div>
159 <div><a href="#"><img src="img/7.jpg" /></a></div>
160 <div><a href="#"><img src="img/8.jpg" /></a></div>
161 </div>
162 <!--数字-->
163 <div class="num2">
164 <span class="fontsty"><a href="#">1</a></span>
165 <span><a href="#">2</a></span>
166 <span><a href="#">3</a></span>
167 <span><a href="#">4</a></span>
168 <span><a href="#">5</a></span>
169 <span><a href="#">6</a></span>
170 <span><a href="#">7</a></span>
171 <span><a href="#">8</a></span>
172 </div>
173 <button class="stop" value="停止" >停止</button>
174 <button class="start" value="播放" >播放</button>
175 </div>
176
177
178 </body>
179 </html>