jQuery焦點圖輪播slide插件

需求示例：

一、插件API

1、插件使用

$.slide( container, contentCls, triggerCls [,config] ); 

2、必選參數

container: selector, // 外圍盒子選擇器
contentCls: selector, // 內容面板父容器ClassName
triggerCls: selector, // 觸發器父容器ClassName 

3、config配置可選參數，例 :

{
　　autoplay: true, // 是否自動輪播，默認false
　　delay: 4000, // 自動輪播延遲時間，默認4000，單位毫秒
　　interval: 4000, // 自動輪播間隙時間，默認4400，單位毫秒
　　duration: 400, // 輪播動畫持續時間，默認400，單位毫秒
　　easing: 'linear', // 輪播過渡方式，默認swing
　　activeCls: 'current' // 觸發器激活樣式，默認slide-active
} 

 二、插件源碼

$.extend({
    slide: function( container, contentCls, triggerCls, config ){
            // 外圍盒子
        var container_box = $(container),
            // 內容父元素
            content_box = $(contentCls, container),
            // 觸發器父元素
            trigger_box = $(triggerCls, container),
            // 內容子元素集合
            content_childs = $(contentCls, container).children(),
            // 第一個內容子元素
            first_CtnElem = $(content_childs.get(0)),
            // 觸發器子元素集合
            trigger_childs = $(triggerCls, container).children(),
            // 滾動步伐值(固定，每個內容子元素寬度相同)
            fixed_steps = first_CtnElem.width(),
            // 內容子元素長度
            len = content_childs.length,
            // 內容子元素總長度
            total_w = fixed_steps*len,
            // 初始化left變量
            left = 0,
            // 定時器
            setTimeoutId,
            // 默認配置
            defaultConfig = {
                auto: false,
                delay: 4000,
                interval: 4400,
                duration: 400,
                easing: 'swing',
                activeCls: 'slide-active'
            };
            // 配置項
            config = $.isPlainObject(config)&&config ? $.extend( defaultConfig, config )&&defaultConfig : defaultConfig;

        // 定時器綁定函數
        function autoSlide(){
            left = parseInt(content_box.get(0).style.left, 10);
            left = left - fixed_steps; // 獲取下一次輪播left值
            
            // 為當前觸發器元素增加激活樣式
            var curIndex = Math.abs(left/fixed_steps);
            if (curIndex <= len-1) {
                $(trigger_childs[curIndex]).addClass(config.activeCls).siblings().removeClass(config.activeCls);
            } else {
                $(trigger_childs[0]).addClass(config.activeCls).siblings().removeClass(config.activeCls);
            }
            
            // 輪播計算
            if (Math.abs(left) < total_w) {
                content_box.stop(true, true).animate({ left: left + 'px' }, config.duration, config.easing, function(){
                    // 輪播到最后一項時，第一個內容子元素更新position，left屬性值
                    if (Math.abs(left) === (total_w-fixed_steps)) {
                        first_CtnElem.css({ position: 'relative', left: total_w + 'px' });
                    }
                });
            }
            else {
                // 動畫left為負的total_w像素時，重置第一個內容子元素和其自身樣式
                content_box.stop(true, true).animate({ left: left + 'px' }, config.duration, config.easing, function(){
                    //first_CtnElem.css({ position: '', left: '' });
                    first_CtnElem.removeAttr('style');
                    content_box.css({ left: 0 });
                });
            }
            // 定時器
            if (!!config.autoplay) {
                setTimeoutId = setTimeout(autoSlide, config.delay);
            }
        }
        
        // 初始化操作
        content_box.css({ width: total_w + 'px', position: 'absolute', top: 0, left: 0});
        
        // 是否自動輪播
        if (!!config.autoplay) {
            setTimeoutId = setTimeout(autoSlide, config.delay);
        }
        
        // 觸發器綁定事件
        $(trigger_childs).bind('mouseover', function(e){
            var curTarget = e.currentTarget,
                idx = trigger_childs.index(curTarget);
            left = -(total_w/len)*idx;
            
            $(curTarget).addClass(config.activeCls).siblings().removeClass(config.activeCls);
            content_box.stop(true, true).animate({ left: left + 'px' }, config.duration, config.easing, function(){
                //first_CtnElem.css({ position: '', left: '' });
                first_CtnElem.removeAttr('style');
                // 輪播到最后一項時，第一個內容子元素更新position，left屬性值
                if (Math.abs(left) === (total_w-fixed_steps)) {
                    first_CtnElem.css({ position: 'relative', left: total_w + 'px' });
                }
            });
        });
        
        // 外圍盒子綁定事件
        // 觸發mouseover事件，取消在各種情景中正在執行的定時器，避免與觸發器元素所觸發的事件代碼沖突
        container_box.bind('mouseover', function(e){
            // 第一次觸發mouseover事件時，如果延遲時間還沒過時，則取消定時器setTimeoutId
            // 第一次觸發mouseover事件時，如果延遲已過，則取消正在執行的定時器setTimeoutId
            // 如果超過一次觸發mouseover事件時，則取消由mouseleave事件所觸發的定時器
            if (!!config.autoplay) {
                clearTimeout(setTimeoutId);
            }
        });
        
        // 觸發mouseleave事件，增加定時器，自動輪播得以繼續
        container_box.bind('mouseleave', function(e){
            if (!!config.autoplay) {
                setTimeoutId = setTimeout(autoSlide, config.delay);
            }
        });
        
        return this;
    }
});

 

三、示例

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery Slide</title>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<style>
* { margin: 0; padding: 0; }
img { display: block; border: none; }
body { font-size: 12px; font-family: '微軟雅黑'; }
ul { list-style: none; }
.clear-fix:after { content: ' '; display: block; height: 0; visibility: hidden; clear: both; }
.clear-fix { zoom: 1; }
#container { margin: 0 auto; width: 520px; height: 320px; overflow: hidden; position: relative; }
.content li { width: 520px; height: 320px; float: left; }
.trigger { position: absolute; bottom: 10px; right: 10px; }
.trigger li { float: left; display: inline; margin-left: 10px; color: #333; font-size: 18px; line-height: 18px; overflow: hidden; cursor: pointer; }
.trigger li.current { color: red; }
</style>
</head>

<body>
<div id="container">
    <ul class="clear-fix content">
        <li>
            <a href="" target="_blank">
                <img width="520" height="320" src="http://img04.taobaocdn.com/tps/i4/T1Ei5gXENcXXbsjuY7-520-320.png">
            </a>
        </li>
        <li>
            <a href="" target="_blank">
                <img width="520" height="320" src="http://img01.taobaocdn.com/tps/i1/T1bT4MXEJgXXbsjuY7-520-320.png">
            </a>
        </li>
        <li>
            <a href="" target="_blank">
                <img width="520" height="320" src="http://img02.taobaocdn.com/tps/i2/T1d4ibXvFaXXbsjuY7-520-320.png">
            </a>
        </li>
        <li>
            <a href="" target="_blank">
                <img width="520" height="320" src="http://img04.taobaocdn.com/tps/i4/T11Tt_XstbXXbsjuY7-520-320.png">
            </a>
        </li>
        <li>
            <a href="" target="_blank">
                <img width="520" height="320" src="http://img03.taobaocdn.com/tps/i3/T1uqOfXxxaXXcQhuY7-520-320.jpg">
            </a>
        </li>
        <li>
            <a href="" target="_blank">
                <img width="520" height="320" src="http://img03.taobaocdn.com/tps/i3/T1o7l8XCRbXXbsjuY7-520-320.png">
            </a>
        </li>
    </ul>
    <ul class="clear-fix trigger">
        <li class="current">●</li>
        <li>●</li>
        <li>●</li>
        <li>●</li>
        <li>●</li>
        <li>●</li>
    </ul>
</div>
<script>
// 此處為插件源碼，省略
$(function(){
    $.slide( '#container', '.content', '.trigger',
        {
            auto: true,
            delay: 4000,
            interval: 4000,
            duration: 400,
            easing: 'linear',
            activeCls: 'current'
        }
    );
});
</script>
</body>
</html>

PS：各個內容面板寬度必須一致，還有外圍container容器CSS樣式必須為相對定位

作者：華子yjh，轉載時請注明出處並附上原文鏈接