jquery 图片自动切换

基于jQuery淡入淡出可自动切换的幻灯插件

Posted by Mr.Think on 08/20/2010 分类于@jQuery <!--<span id="addcomment"><a href="#respond" rel="nofollow" title="Leave a comment ?">Leave a comment</a></span>--><!--<span id="gotocomments"><a href="#comments" rel="nofollow" title="Go to comments ?">Go to comments</a></span>-->

基于jQuery淡入淡出可自动切换的幻灯插件,原型是前几天写的一个幻灯效果,因为一个小bug卡了两天,然后清空之前写的代码,重新整理思路写出来的. 思维是个很诡异的东西,一旦陷入某个死角,很难逃出. 惟有冷却一些时间,完全抛开旧的思维,才能找到新的出路.
其实就是一个幻灯效果,考虑到使用方便,就封装成一个插件了.
插件特点
1. 参数高度自定义;
2. 可重复调用且与不影响;
3. 插件文件小,压缩后仅1.04k,开发版3.29k.
演示及下载
点此查看DEMO点此下载插件
使用方法
1. 引入jQuery库文件及jQuery.iFadeSlide.pack.js插件文件(若页面有其他js文件,可与之合并以减小http请求),引入位置自定义;

1. <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
2. <script src="js/jquery.iFadeSldie.pack.js"></script>

样式文件无须引入,若使用DEMO中的结构,可直接将样式合并于项目页面中.建议样式自定义.
2. 在页面中调用插件并传入切换元素的参数, 若为空或未传入的参数,均按插件中的默认参数执行.例如如下代码是DEMO演示中的三组幻灯切换调用:

1. $(function(){
2.     //SAMPLE-A调用---未传入任何参数,调用默认参数
3.     $('div#slide').iFadeSlide();
4.     //SAMPLE-B调用---传入新的参数,将覆盖原有参数,未传入的使用默认值
5.     $('div#slide_b').iFadeSlide({
6.         field: $('div#slide_b a'),
7.         icocon:$('div.ico_b'),
8.         hoverCls: 'high_b',
9.         curIndex: 2,  //索引值0起始,故此处设置为第3项高亮
10.         interval: 2000
11.     });
12.     //SAMPLE-C调用---传入新的参数,将覆盖原有参数,未传入的使用默认值
13.     $('div#slide_c').iFadeSlide({
14.         field: $('div#slide_c img'),
15.         icocon: $('div.ico_c'),
16.         outTime:100,
17.         inTime: 200
18.     });
19. });

注意,调用插件部分须置入插件文件引用后面.
核心代码

; ( function ( $ ){
    $. fn . extend ({
         iFadeSlide : function ( options ){
             //插件参数初始化
             var iset = {
                 field :$ ( ' div#slide img ' ) ,  //切换元素集合
                 icocon :$ ( ' div.ico ' ) ,  //索引容器
                 hoverCls : ' high ' ,  //切换至当前索引高亮显示样式
                 curIndex : 0 ,  //默认高亮显示的索引值,索引值为0起始
                 outTime : 200 ,  //元素淡出时间(ms)
                 inTime : 300 ,  //元素淡入时间(ms)
                 interval : 3000   //元素切换间隔时间(ms)       
             } ;
             options = options || {} ;
            $. extend ( iset , options ) ;    //合并参数对象.若options传入有新值则覆盖iset中对应值,否则使用默认值.
             //根据切换元素量生成对应的索引值列表并插入到切换区域中
             var ulcon = " <ul> " ;
             iset . field . each ( function ( i ){
                 ulcon = ulcon + ' <li> ' + ( i + 1 ) + ' </li> ' ;
             }) ;
             ulcon += ' </ul> ' ;
             iset . icocon . append ( ulcon ) ;
          
             var ico = iset . icocon . find ( ' li ' ) ;  //索引列表集合
             var size = iset . field . size () ;  //切换元素量
             var index = 0 ;  //初始索引值
             var clearFun = null ;
             //淡出淡入函数
             var fadeFun = function ( obj ){
                 index = ico . index ( obj ) ;  //取当前索引值
                 //淡出当前可见元素,并通过索引值找到要淡入的元素
                 iset . field . filter ( ' :visible ' ) . fadeOut ( iset . outTime , function (){
                     iset . field . eq ( index ) . fadeIn ( iset . inTime ) ;
                 }) ;
                 //为当前索引添加高亮样式并移除同级元素中的高亮样式
                $ ( obj ) . addClass ( iset . hoverCls ) . siblings () . removeClass ( iset . hoverCls ) ;
             } ;
             //切换函数
             var changeFun = function (){
                 index ++;  //累积索引值
                 if ( index == size ){ index = 0 } ;  //当索引值等于切换元素量时,初始化为0
                 ico . eq ( index ) . trigger ( ' mouseleave ' ) ;  //为当前的索引模拟鼠标划出元素区事件
             } ;
             //自动切换函数
             var scrollFun = function (){
                 clearFun = setInterval ( function (){
                     changeFun ()
                 } , iset . interval ) ;
             } ;
             //停止自动切换函数
             var stopFun = function (){
                 clearInterval ( clearFun ) ;
             } ;
            
             scrollFun () ;  //初始自动切换
            
             //索引区域鼠标划入停止自动切换并切换元素至当前索引,鼠标划出初始化索引至当前值(否则鼠标划出切换会乱)
             ico . hover ( function (){
                 stopFun () ;
                 fadeFun ( this ) ;
             } , function (){
                 fadeFun ( this ) ;
             }) . eq ( iset . curIndex ) . mouseleave () ;  //初始高亮显示的索引值
            
             //切换区域鼠标划入停止自动切换,划出继续自动
             iset . field . hover ( function (){
                 stopFun () ;
             } , function (){
                 scrollFun () ;
             }) ;
         }
     }) ;
})( jQuery ) ;