1 
  2 
  3 
  4 
  5 jQuery插件timers定时器
  6 
  7 
  8 
  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 
 54 
 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 
122 
123 
124 
125 
126 
127     
128       

129       
 

130       

131       

132       

133       

134       

135       

136     

137     
138     
139         1
140         2
141         3
142         4
143         5
144         6
145         7
146         8   
147