switchable圖片切換

前提： 最近由於專案的需要jquery "switchable圖片切換"效果 所以趁著週末有空時間研究下 ，以前工作都依賴於kissy框架，所以也沒有綜合的寫過類似的，如下圖所示效果：

 

有左右按鈕 和下面的數字按鈕 點選左右按鈕或者數字按鈕切換到上一屏或者下一屏等。

HTML程式碼如下

<div class="wrapper">
        <div class="focus" id="focus">
            <ul>
                <li>
                    <a href="#">
                        <img src="images/01.jpg"/>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <img src="images/02.jpg"/>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <img src="images/03.jpg"/>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <img src="images/04.jpg"/>
                    </a>
                </li>
            </ul>
        </div>
    </div>

css程式碼如下：

<style>
    *{margin:0;padding:0;}
    body{font-size:12px;color:#222;font-family:Verdana,Arial,Helvetica,sans-serif;background:#f0f0f0;}
    .clearfix:after{content: ".";display: block;height: 0;clear: both;visibility: hidden;}
    .clearfix{zoom:1;}
    ul,li{list-style:none;}
    img{border:0;}

    .wrapper{width:800px;margin:0 auto;padding-bottom:50px;}
    .focus{width:800px;height:280px;overflow:hidden;position:relative;}
    .focus ul{height:380px;position:absolute;}

    .focus ul li{float:left;position:relative;width:800px;height:280px;overflow:hidden;}

    .focus ul li div{position:absolute;overflow:hidden;}
    .focus .btnBg{position:absolute;width:800px;height:20px;left:0;bottom:0;background:#000;}
    .focus .btn{position:absolute;width:780px;height:10px;padding:5px 10px;right:0;bottom:0;text-align:right;}
    .focus .btn span{display:inline-block;_display:inline;_zoom:1;width:25px;height:10px;_font-size:0;margin-left:5px;cursor:pointer;background:#fff;opacity:0.4;filter:alpha(opacity=40);}
    .focus .btn span.on{background:#fff;opacity:1;filter:alpha(opacity=100);}

    .focus .preNext{width:45px;height:100px;position:absolute;top:90px;background:url(images/sprite.png) no-repeat 0 0;cursor:pointer;opacity:0.2;filter:alpha(opacity=20);}
    .focus .current {
        opacity:0.5;filter:alpha(opacity=50);
    }
    .focus .pre{left:0;}
    .focus .next{right:0;background-position:right top;}
    
 </style>

JS程式碼如下：

/**
 * switchable 切換
 */

 $(function(){
     function SwitchTab() {
        this.config = {
            wrapContainer   : '#focus',      // 焦點圖的外部容器
            prev            : '.prev' ,      // 上一頁按鈕
            next            : '.next',       // 下一頁按鈕
            autoplay        : true,          // 是否自動播放 預設為自動
            time            : 3000,          // 間隔時間
            current         : 'current',     // 左右按鈕當前狀態
            on              : 'on',          // 數字按鈕當前狀態
            isNum           : true           // 是否動態生成數字按鈕1,2,3,4 預設為true
        };

        this.cache = {
            index          : 0,          //當前的索引
            picTimer       : undefined   // 儲存定時器的時間
            
        };
     }

     SwitchTab.prototype = {

        init: function(customConfig){
            this.config = $.extend(this.config, customConfig || {});
            var self = this,
                _config = self.config,
                _cache = self.cache;
            
            var sWidth = $(_config.wrapContainer).width(),   //獲取焦點圖外層容器寬度
                len = $(_config.wrapContainer + ' ul li').length;

            /* 下面的程式碼初始化 數字按鈕 按鈕半透明 上一頁和下一頁按鈕*/
            var btn = "<div class='btnBg'></div><div class='btn'>";
            if(_config.isNum) {
                for(var i = 0; i < len; i+=1) {
                    btn+= "<span></span>";
                }
            }
            
            btn += "</div><div class='preNext prev'></div><div class='preNext next'></div>";
            $(_config.wrapContainer).append(btn);
            
            //為小按鈕新增滑鼠滑入事件，以顯示相應的內容
            $(_config.wrapContainer + ' .btn span') && 
            $(_config.wrapContainer + ' .btn span').mouseover(function(){
                _cache.index = $(_config.wrapContainer + ' .btn span').index(this);
                t && clearTimeout(t);
                var t = setTimeout(function(){
                    hover();
                },100);
            }).eq(0).trigger("mouseover");

            function hover(){
                self.showPics(_cache.index,sWidth);
            }

            // 上一頁 下一頁按鈕透明處理
            $(_config.wrapContainer + ' .preNext').hover(function(){
                $(this).stop(true,false).addClass(_config.current);
            },function(){
                $(this).stop(true,false).removeClass(_config.current);
            });

            // 上一頁按鈕
            $(_config.prev).click(function(){
                _cache.index--;
                if(_cache.index == -1) {
                    _cache.index = len - 1;
                }

                self.showPics(_cache.index,sWidth);
            });

            // 下一頁按鈕 
            $(_config.next).click(function(){
                _cache.index++;
                if(_cache.index == len) {
                    _cache.index = 0;
                }
                self.showPics(_cache.index,sWidth);
            });

            //本例為左右滾動，即所有li元素都是在同一排向左浮動，所以這裡需要計算出外圍ul元素的寬度
            $(_config.wrapContainer + ' ul').css("width",sWidth * len);
            
            if(_config.autoplay) {
                // 滑鼠滑到焦點圖時候 停止自動播放 滑出時自動播放
                $(_config.wrapContainer).hover(function(){
                    _cache.picTimer && clearInterval(_cache.picTimer);
                },function(){
                    _cache.picTimer = setInterval(function(){
                        self.showPics(_cache.index,sWidth);
                        _cache.index++;
                        if(_cache.index == len) {
                            _cache.index = 0;
                        }
                    },_config.time);
                }).trigger("mouseleave");
            }    
        },
        showPics: function(index,sWidth){
            var self = this,
                _config = self.config,
                nowLeft = -index*sWidth;

            //通過animate()調整ul元素滾動到計算出的position
            $(_config.wrapContainer + " ul").stop(true,false).animate({"left":nowLeft},300); 
            $(_config.wrapContainer + ' .btn span') &&
            $(_config.wrapContainer + ' .btn span').removeClass(_config.on).eq(index).addClass(_config.on); //為當前的按鈕切換到選中的效果
        }
     }

     new SwitchTab().init({});
 });

上面都有註釋 就不用解釋了哦！