一个基于jquery的banner轮播

一个banner轮播广告。

JavaScript代码

1. <script type= "text/javascript"  src= "http://www.dabaii.com/demo/20100907/js/jquery.js" ></script>   
2. <script type= "text/javascript" >    
3. //dabai.chen 2010-12.02 for zhenai.com index    
4.     
5. //无插件 banner切换效果    
6. $( function (){   
7.      //获取可点触发编号    
8.     $( '#bannerTextBox' ).find( 'li' ).mouseover( function (){   
9.                          //停止自动切换    
10.                         clearInterval(t1);   
11.                          //获取编号自定义值 以获取对应图片    
12.                          var  i = $( this ).attr( 'set' );   
13.                          //调用切换效果，切换到当前鼠标焦点编号的banner    
14.                         changeBanner( 'x' ,i);   
15.                          //设置当前编号的颜色     
16.                         setListNo.apply( this ,[ 'x' ]);   
17.                  }).mouseout( function (){   
18.                          //鼠标离开编号 自动开始继续切换    
19.                         t1 = setInterval(changeBanner, '3000' );   
20.     })   
21. //定义可触发编号 该变量用来自动切换过程中累加计算 用于判断是否到达最好一个banner位置    
22. var  bannerListIndex = 1;   
23.     
24. //设置编号 参数setNo 用来判断方法是setInterval自动触发的还是 mouseover手动触发    
25. function  setListNo(setNo){   
26.      //清空历史的选中位置    
27.     $( '#bannerTextBox' ).find( ".thisHover" ).removeClass( 'thisHover' );   
28.      //如果是setInterval自动触发    
29.      if (setNo!= "x" ){   
30.              //通过 定义可触发编号bannerListIndex 累加参数判断选中位置    
31.             $( '#bannerTextBox' ).find( "li" ).eq(setNo).addClass( "thisHover" );   
32.         }   
33.      //如果是手动触发    
34.      else {   
35.              //通过设置当前鼠标点击对象设置 选中位置    
36.             $( this ).addClass( "thisHover" );     
37.         }   
38.     }   
39.     
40. //切换方法 参数o 用来判断是否是手动出发  i 用来记录手动出发位置，以便真确定义显示图片    
41. function  changeBanner(o,i){   
42.         $( "#bannerImgesBox" ).find( 'a' ).hide();   
43.          if (o !=  'x' ){   
44.             setListNo(bannerListIndex);   
45.             $( "#bannerImgesBox" ).find( 'a' ).eq(bannerListIndex).fadeIn( "slow" );   
46.         } else {   
47.                
48.             $( "#bannerImgesBox" ).find( 'a' ).eq(i).fadeIn( "slow" );   
49.             bannerListIndex = i;   
50.             }   
51.          // 累加bannerListIndex 于判断是否到达最后一个banner位置     
52.         bannerListIndex++;   
53.          if (bannerListIndex > 2 ){   
54.             bannerListIndex = 0   
55.         }   
56.     }   
57. //changeBanner();    
58. var  t1 = setInterval(changeBanner, '3000' );   
59. })   
60. </script>  

 

其实这类banner广告图主要思路都是一样的。

1.定义一个切换的方法。

2.定义一个方法保证切换的时候 下面的  1  2  3  之类的选中位置正确

我这里用的fadeIn() 方法来实现效果。 如果喜欢可以改成其他的。

demo：http://dabaii.com/demo/20101203/index.html

 

2010.12.10：ps:最近同事发现1.2版本jQ下面有问题。主要原因是jquery1.2没有通过each 方法给数组对象绑定时间的时候产生不会闭包效果。所以直接绑定事件的时候始终会执行最后一个。

其实在代码设计的时候 按道理也应该使用each 方法，这样就不需要在 切换对象 上添加一个属性 去获取了。

JavaScript代码

1. //获取编号自定义值 以获取对应图片   
2. var  i = $( this ).attr( 'set' );  

如果用each来循环绑定时间，就不需要这个多余的步骤了。下面是修改后的事件绑定。

JavaScript代码

1. //获取可点触发编号   
2.     $('#bannerTextBox' ).find( 'li' ).each( function (w){  
3.         $(this ).mouseover( function (){  
4.                         //停止自动切换   
5.                         clearInterval(t1);  
6.                         //调用切换效果，切换到当前鼠标焦点编号的banner   
7.                         changeBanner('x' ,w);  
8.                         //设置当前编号的颜色    
9.                         setListNo.apply(this ,[ 'x' ]);  
10.                  }).mouseout(function (){  
11.                         //鼠标离开编号 自动开始继续切换   
12.                         t1 = setInterval(changeBanner,'3000' );  
13.     })  
14.           
15.         })  

通过each 的自带索引参数就可以确定但前点击的是第几个。

最后通过测试，发现1.2的jpqery 的数组对象有的情况下还是会产生闭包的。具体我也不知道怎么去判断。所以建议只要是数组对象需要给每个元素绑定时间都调用each方法。

转载自 ： http://www.dabaii.com/  不错的js+css前段技术博客