jQuery淡入淡出可自動切換的幻燈外掛程式

jquery淡入淡出可自動切換的幻燈外掛程式
1. 使用者快速划過按鈕時不觸發滑鼠事件;
2. 滑鼠劃入當前圖片按鈕時不閃爍;
3. 簡化並最佳化代碼.
使用方法就不詳述了, 請參見源碼及相關注釋
$.fn.ifadeslide = function(iset){
 /*
  * iset選擇性參數說明:
  * iset.field==>幻燈地區內的圖片集
  * iset.ico==>按鈕鉤子
  * iset.high==>按鈕高亮樣式
  * iset.interval==>圖片切換時間
  * iset.leavetime==>不觸發滑鼠劃入事件的最大時間值
  * iset.fadeintime==>淡入時間
  * iset.fadeouttime==>淡出時間
  * 調用方式$(document).ifadeslide({field:'...',ico:'...',...})
  */
    iset = $.extend({high:'high',interval:3000,leavetime:150,fadeouttime:400,fadeintime:400},iset);
    var imgfield = $(iset.field || '#slide>img');
    var icofield = $(iset.ico || '#ico');
 var curindex = 0;
    var slideinterval = iset.interval || 3000;
    var hovertime = iset.leavetime || 150;
    var fadeouttime = iset.fadeouttime || 400;
    var fadeintime = iset.fadeintime || 400;
    var icos=null, fasthoverfun = null, autoslidefun = null, hasicohighcls = null, changefun = null,max=null;;
    var icohtml = '<ul>';
 max=imgfield.size();
 //按圖片傳入對應的按鈕
    imgfield.each(function(i){
        icohtml += '<li>' + (i + 1) + '</li>';
    });
    icohtml += '</ul>';
    icofield.append(icohtml);
 //淡入淡出函數
    changefun = function(n){
        imgfield.filter(':visible').fadeout(fadeouttime, function(){
            imgfield.eq(n).fadein(fadeintime)
            icos.eq(n).addclass(iset.high).siblings().removeclass(iset.high);
        });
    }
    icos = icofield.find('ul>li');
 //為第一個按鍵初始化高亮
    icos.first().addclass(iset.high);
 //按鈕滑鼠劃入划出事件
    icos.hover(function(){
        clearinterval(autoslidefun);
        curindex = icos.index(this);
        hasicohighname = $(this).hasclass(iset.high);
  //settimeout避免使用者快速(無意識性划過)划過時觸發事件
        fasthoverfun = settimeout(function(){
   //滑鼠劃入當前圖片按鈕時不閃爍
            if (!hasicohighname) {
                changefun(curindex);
            }
        }, hovertime);
    }, function(){
        cleartimeout(fasthoverfun);
  //自動切換
        autoslidefun = setinterval(function(){
            curindex++;
            changefun(curindex);
            if (curindex ==max ) {
    changefun(0);
                curindex = 0;
            }
        }, slideinterval)
    }).eq(0).trigger('mouseleave');

    //當滑鼠劃入圖片地區時停止切換
    imgfield.hover(function(){
        curindex = imgfield.index(this);
        clearinterval(autoslidefun);
    }, function(){
        icos.eq(curindex).trigger('mouseleave');
    });
}

執行個體完整代碼

<style>
.box{width:700px;height:250px}
/*sample-a*/
#slide { position:relative;width:200px; height:250px; overflow:hidden; border:1px solid #ccc; float:left}
#slide img{width:200px; height:250px;cursor:pointer}
#slide #ico{position:absolute; right:8px;bottom:6px}
#slide #ico li{background:#fff;float:left;display:block; width:15px; height:15px; line-height:15px;border:1px solid #cecece;font-family:arial, helvetica, sans-serif;text-align:center;margin:2px; padding: 1px;cursor:pointer}
#slide #ico li.high{background:#047;color:#fff;font-weight:bolder}
/*sample-b*/
#slide_b { position:relative;width:460px; height:250px; overflow:hidden; border:1px solid #ccc; float:right }
#slide_b img{width:460px; height:250px}
#slide_b .ico_b{position:absolute; right:8px;bottom:6px}
#slide_b .ico_b li{background:#fff;float:left;display:block; width:15px; height:15px; line-height:15px;border:1px solid #cecece;font-family:arial, helvetica, sans-serif;text-align:center;margin:2px; padding: 1px;cursor:pointer}
#slide_b .ico_b li.high_b{background:#a40000;color:#fff;font-weight:bolder}
/*sample-c*/
#slide_c { position:relative;width:700px; height:250px; overflow:hidden; border:1px solid #ccc; margin-top:20px; }
#slide_c img{width:700px; height:250px}
#slide_c .ico_c{position:absolute; right:8px;bottom:6px}
#slide_c .ico_c li{background:#fff;float:left;display:block; width:15px; height:15px; line-height:15px;border:1px solid #cecece;font-family:arial, helvetica, sans-serif;text-align:center;margin:2px; padding: 1px;cursor:pointer}
#slide_c .ico_c li.high{background:#000;color:#fff;font-weight:bolder}
</style>

jquery代碼

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script>
/*******************************
 * @基於jquery淡入淡出可自動切換的幻燈外掛程式
 * @jquery vesion:1.4.2
 * @plugin page:http://mrthink.net/jq-plugin-ifadeslide/
 * @author mr.think
 * @author blog http://mrthink.net/
 * @creation date: 2011.01.11
 *******************************/
$.fn.ifadeslide = function(iset){
 /*
  * iset選擇性參數說明:
  * iset.field==>幻燈地區內的圖片集
  * iset.ico==>按鈕鉤子
  * iset.high==>按鈕高亮樣式
  * iset.interval==>圖片切換時間
  * iset.leavetime==>不觸發滑鼠劃入事件的最大時間值
  * iset.fadeintime==>淡入時間
  * iset.fadeouttime==>淡出時間
  * 調用方式$(document).ifadeslide({field:'...',ico:'...',...})
  */
    iset = $.extend({high:'high',interval:3000,leavetime:150,fadeouttime:400,fadeintime:400},iset);
    var imgfield = $(iset.field || '#slide>img');
    var icofield = $(iset.ico || '#ico');
 var curindex = 0;
    var slideinterval = iset.interval || 3000;
    var hovertime = iset.leavetime || 150;
    var fadeouttime = iset.fadeouttime || 400;
    var fadeintime = iset.fadeintime || 400;
    var icos=null, fasthoverfun = null, autoslidefun = null, hasicohighcls = null, changefun = null,max=null;;
    var icohtml = '<ul>';
 max=imgfield.size();
 //按圖片傳入對應的按鈕
    imgfield.each(function(i){
        icohtml += '<li>' + (i + 1) + '</li>';
    });
    icohtml += '</ul>';
    icofield.append(icohtml);
 //淡入淡出函數
    changefun = function(n){
        imgfield.filter(':visible').fadeout(fadeouttime, function(){
            imgfield.eq(n).fadein(fadeintime)
            icos.eq(n).addclass(iset.high).siblings().removeclass(iset.high);
        });
    }
    icos = icofield.find('ul>li');
 //為第一個按鍵初始化高亮
    icos.first().addclass(iset.high);
 //按鈕滑鼠劃入划出事件
    icos.hover(function(){
        clearinterval(autoslidefun);
        curindex = icos.index(this);
        hasicohighname = $(this).hasclass(iset.high);
  //settimeout避免使用者快速(無意識性划過)划過時觸發事件
        fasthoverfun = settimeout(function(){
   //滑鼠劃入當前圖片按鈕時不閃爍
            if (!hasicohighname) {
                changefun(curindex);
            }
        }, hovertime);
    }, function(){
        cleartimeout(fasthoverfun);
  //自動切換
        autoslidefun = setinterval(function(){
            curindex++;
            changefun(curindex);
            if (curindex ==max ) {
    changefun(0);
                curindex = 0;
            }
        }, slideinterval)
    }).eq(0).trigger('mouseleave');
 
    //當滑鼠劃入圖片地區時停止切換
    imgfield.hover(function(){
        curindex = imgfield.index(this);
        clearinterval(autoslidefun);
    }, function(){
        icos.eq(curindex).trigger('mouseleave');
    });
}

$(function(){
 //sample-a
 $(document).ifadeslide();
 
 //sample-b
 $(document).ifadeslide({
  field: $('div#slide_b a'),
  ico:$('div.ico_b'),
        high: 'high_b',
        interval: 2000
 });
 
 //sample-c
 $(document).ifadeslide({
  field: $('div#slide_c img'),
  ico: $('div.ico_c'),
  fadeouttime:100,
  fadeintime: 200
 });
});
</script>

html代碼

<div id="demo">
<div class="box">
<!--sample-a-->
<div id="slide">
            <img src="/static-data/assets/6/619e98ef7507a105040d1a92ca70232a1eb207fd_m.jpg" title="demo" alt="demo" />
            <img src="/static-data/assets/6/178ead7c5436be41b07126a1f2053be976c53576_m.jpg" title="demo" alt="demo" />
            <img src="/static-data/assets/6/5958057370c288b30c48ac57261366f7e6613eaa_m.jpg" title="demo" alt="demo" />
            <div id="ico"></div>
</div>
<!--sample-a end-->
<!--sample-b-->
<div id="slide_b">
            <a href="http://mrthink.net/sitemap/"><img src="/static-data/assets/6/619e98ef7507a105040d1a92ca70232a1eb207fd_m.jpg" title="demo" alt="demo" /></a>
            <a href="http://mrthink.net/sitemap/"><img src="/static-data/assets/6/178ead7c5436be41b07126a1f2053be976c53576_m.jpg" title="demo" alt="demo" /></a>
            <a href="http://mrthink.net/sitemap/"><img src="/static-data/assets/6/5958057370c288b30c48ac57261366f7e6613eaa_m.jpg" title="demo" alt="demo" /></a>
            <a href="http://mrthink.net/sitemap/"><img src="/static-data/assets/6/f8bc38048259f10f07bb3fb06a5c8867dd2a4419_m.jpg" title="demo" alt="demo" /></a>
            <div class="ico_b"></div>
</div>
<!--sample-b end-->
</div>
<!--sample-c-->
<div id="slide_c">
            <img src="/static-data/assets/6/619e98ef7507a105040d1a92ca70232a1eb207fd_m.jpg" title="demo" alt="demo" />
            <img src="/static-data/assets/6/178ead7c5436be41b07126a1f2053be976c53576_m.jpg" title="demo" alt="demo" />
            <img src="/static-data/assets/6/5958057370c288b30c48ac57261366f7e6613eaa_m.jpg" title="demo" alt="demo" />
    <img src="/static-data/assets/6/f8bc38048259f10f07bb3fb06a5c8867dd2a4419_m.jpg" title="demo" alt="demo" />
            <img src="/static-data/assets/6/cd8cdf92b2519c344d1e9849fbaf238f7c6b5d13_m.jpg" title="demo" alt="demo" />
            <div class="ico_c"></div>
</div>
<!--sample-c end-->
</div>