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>