JS圖片Switchable切換大集合

時間  2019-11-12
標籤 圖片 switchable 切換 集合 欄目 JavaScript 简体版
原文   原文鏈接

JS圖片切換大集合css

     利用週末2天把JS圖片切換常見效果封裝了下，好比：輪播，顯示隱藏，淡入淡出等。廢話很少說，直接看效果吧！JSFiddler連接以下：html

   想看JS輪播切換效果請點擊我！瀏覽器

   固然因爲上傳圖片時候 png圖片自動轉換成jpg 因此左右按鈕有透明，可是也沒有關係，咱們最主要的是看看效果是什麼樣的，至於圖片你們能夠替換。下面看看默認配置項吧！   app

  container
 '',     外層容器 必填項 默認爲空
 contentCls  '.list',     內容所在的容器 默認爲'.list'
 prev  '.prev'   上一頁按鈕 若是沒有的話 不配置 默認爲'.prev'
 next  '.next'    上一頁按鈕 若是沒有的話 不配置 默認爲'.next'
triggerType  'mouseover' ,   觸發類型 默認爲'mouseover'
 on  'select' ,             當前被選中的class類 默認爲'select'
type  'x' ,             輪換類型 輪換效果類型。可設置爲："x"|"y"|"fade"|"toggle | animate"  x爲橫向滾動 y爲縱向滾動，fade爲淡入淡出效果 toggle爲顯示隱藏效果，animate爲動畫效果(相似於fade效果)
speed  800 ,             切換速度(單位：毫秒)
time  5000,             自動輪換間隔時間(單位：毫秒)
auto  true,             是否自動輪播(boolean布爾型) 默認爲true
numBtn  true ,            是否須要數字按鈕(boolean|布爾型) 默認爲true
switchTo  0 ,                切換到第幾項 默認爲第一項
pauseOnHover  true ,            鼠標移到容器裏面是否中止滾動 默認中止
circular  true ,            是否循環切換(boolean|布爾型) 默認爲true
markupType  0 ,            可取0或者其餘數字 默認爲0 若是是其餘數字的話 能夠稍微自定義下(默認狀況下不須要作任何改動，若是想自定義的話，能夠設置，好比：雙輪播效果，左邊有1，2，3，4數字，右邊有5，6，7，8數字效果)。
triggerCls  ''    觸發class 通常狀況下不須要配置 當markupType不爲0的時候 須要配置類名class

如上面配置：都有註釋，其中markupType 和 triggerCls 2個配置項是針對擴展性輪播而作的配置項，好比以下這種輪播效果，能夠經過這2個配置項來設置，以下圖所示：dom

1. 其餘的單輪播 通常狀況下能夠不須要這2個配置項，固然你爲了擴展性，也能夠加上這2個 切忌：markupType 不爲0才生效，固然通常狀況下但願能設置數字 其實字符串也能夠，可是通常狀況下用數字吧！ide

2. 目前支持的輪播類型有5種，其一：x類型是指 "橫向滾動" 其二：y類型是指: "縱向滾動" 其三：'toggle'類型 是指 "顯示隱藏"效果， 其四："fade"類型 是指"淡入淡出"效果，其五：'animate'類型 是動畫透明效果(和fade類型效果差很少)。函數

3. 在作縱向滾動時候 在IE7下 注意有個小小的bug 每一個li縱向有3px間隙 須要在li加display：inline能夠解決，其餘的瀏覽器不須要(包括IE6).動畫

4. 實例化new的時候 有2個參數 其一是cfg對象，能夠以對象的方式傳參數，其二是callbck回調函數。此回調是切換到第幾項的時候的回調。this

5. 數字按鈕支持自定義 好比我本身能夠在代碼上加，5，6，7，8，而不是1，2，3，4,通常狀況下 數字1，2，3，4按鈕是根據圖片的多少來自動生成，其中css樣式要本身寫。spa

    以下代碼：

<ul class="ks-switchable-nav">
    <li>5</li>
    <li>6</li>
    <li>7</li>
    <li>8</li>
    <li>9</li>
</ul>

   切記：菜單項容器ul類必定要有 ks-switchable-nav 這個類名。且內容外部容器都用ul li來寫代碼 不要用div 由於我JS代碼直接根據容器下的li來獲取dom節點的，沒有根據某個class來獲取(由於當初考慮，我不想在某項下面都加一個class，代碼看起來也不怎麼好看)，因此內容項對html代碼有要求的 要想實現效果 內容項都用ul或者ol li標籤來寫代碼。

下面是全部的JS代碼以下：

/**
 * JS switchable圖片切換集合
 * @class Switchable
 * @author tugenhua
 * @param {object} 
 */

 function Switchable(cfg,callback) {
    var self = this;
    self.cfg = $.extend({},defaults,cfg || {});
    self.index = 0;
    self.callback = callback;
    self._init();
    // 綁定事件
    self._bindEnv();
 }
 $.extend(Switchable.prototype,{
    
    /*
     * 初始化 是否生成數字按鈕等事件操做
     */
    _init: function(){
        var self = this;
        var cfg = self.cfg;
        if(cfg.container == '') {return;}
        var containerWidth = $(cfg.container).width(),
            listLens = $(cfg.contentCls + ' li',cfg.container).length,
            navCls = $('.ks-switchable-nav li',$(cfg.container)),
            html = '';
        if(cfg.markupType == 0) {
            if(navCls.length <= 0 && listLens > 0  && cfg.numBtn) {
                navCls = $('<ul class="ks-switchable-nav"></ul>');
                $(cfg.container).append(navCls);
                for(var i = 1; i <= listLens; i+=1) {
                    html += '<li class="slide_'+i+'">'+i+'</li>';
                }
                $('.ks-switchable-nav',$(cfg.container)).html(html);
            }
        }
        
        $(cfg.contentCls,$(cfg.container)).css('position','relative');
        
        if(cfg.switchTo > 0) {
            self._currentItem(cfg.switchTo);
            self.index = cfg.switchTo;
            self._goto(self.index);
        }else {
            self._currentItem(self.index);
            // 開始輪播函數
            self._start(self.index);
        }
    },
    /*
     * 開始輪播
     * @method _start {private}
     */
    _start: function(index){
        var self = this,
            cfg = self.cfg;
        if(!cfg.auto) {return;}
        self._off();
        self.timer = setTimeout(function(){
            self._goto(index);
        },cfg.time);
    },
    /*
     * 輪播中止
     * @method _off {private}
     */
    _off: function(){
        var self = this;
        if(self.timer !== 'undefined') {
            clearTimeout(self.timer);
        }
    },
    /*
     * 具體輪播到第幾項
     * @method _goto {private}
     */
    _goto: function(index){
        var self = this,
            cfg = self.cfg,
            container = $(cfg.container);
        self._off();
        self.index = parseInt(index,10);
        var    elemWidth =  $(cfg.contentCls + ' li',container).width(),
            elemHeight = $(cfg.contentCls + ' li',container).height(),
            listLens = $(cfg.contentCls + ' li',container).length,
            triggerCls = $(cfg.triggerCls,container).length;
        var _moveVal;

        switch(cfg.type) {
        
            case "x":
                _moveVal = -(elemWidth * self.index);
                self._currentItem(self.index);
                $(cfg.contentCls,container).stop(true,false).animate({"left":_moveVal},cfg.speed);
            break;

            case "y":
                _moveVal = -(elemHeight * self.index);
                self._currentItem(self.index);
                $(cfg.contentCls,container).stop(true,false).animate({"top":_moveVal},cfg.speed);
            break;

            case "toggle":
                self._currentItem(self.index);
                $(cfg.contentCls+ ' li',container).eq(self.index).show().siblings().hide();
            break;

            case "fade":
                self._currentItem(self.index);
                $(cfg.contentCls+ ' li',container).css({"display":"none","position":"absolute","top":0,"left":0,"zIndex":""});
                $(cfg.contentCls+ ' li',container).fadeOut(cfg.speed).parent().children().eq(self.index).fadeIn(cfg.speed);
            break;

            case "animate":
                self._currentItem(self.index);
                $(cfg.contentCls+ ' li',container).css({"position":"absolute","top":0,"left":0,"zIndex":"1"});
                $(cfg.contentCls+ ' li',container).parent().children().eq(self.index).css({opacity: 0.0, "z-index": 10}).animate({opacity: 1.0}, cfg.speed, function(){});
                break;
        }    
        self.callback && $.isFunction(self.callback) && self.callback(self);

        if(cfg.auto) {
            self.index++;
            if(self.index == listLens) {
                if(!cfg.circular) {
                    return;
                }
                self.index = 0;
            }else if(triggerCls > 0 && self.index == triggerCls) {
                if(!cfg.circular) {
                    return;
                }
                self.index = 0;
            }
            self._start(self.index);
        }
    },
    /*
     * 選中當前的項
     * @method _currentItem {private}
     * @param {n} 當前的索引
     */
     _currentItem: function(n) {
        var self = this,
            cfg = self.cfg;
        var numBtns;
        if(cfg.markupType == 0) {
            if($('.ks-switchable-nav',$(cfg.container)).length > 0) {
                numBtns = $('.ks-switchable-nav li',$(cfg.container));
                !numBtns.eq(n).hasClass(cfg.on) && 
                numBtns.eq(n).addClass(cfg.on).siblings().removeClass(cfg.on);
            }
        }else {
            if($(cfg.triggerCls,$(cfg.container)).length > 0) {
                numBtns = $(cfg.triggerCls,$(cfg.container));
                $.each(numBtns,function(){
                    $(this).removeClass(cfg.on);
                });
                !numBtns.eq(n).hasClass(cfg.on) && 
                numBtns.eq(n).addClass(cfg.on).siblings().removeClass(cfg.on);
            }
        }
        if($(cfg.contentCls,$(cfg.container)).length > 0) {
            var contents = $(cfg.contentCls + ' li',$(cfg.container));
            !contents.eq(n).hasClass('isSelected') && 
            contents.eq(n).addClass('isSelected').siblings().removeClass('isSelected');
        }
     },
     /*
      * 綁定全部的事件
      * @method _bindEnv {private}
      */
    _bindEnv: function(){
        var self = this,
            cfg = self.cfg;
        var    container = $(cfg.container),
            prev = $(cfg.prev,container),
            next = $(cfg.next,container),
            listLens = $(cfg.contentCls + ' li',container).length;
            navCls = $('.ks-switchable-nav li',container),
            triggerCls = $(cfg.triggerCls,container);

        // 上一頁按鈕 prev
        if(prev.length > 0) {
            $(prev,container).unbind('click').bind('click',function(e){

                self.index = self.getSelectedItem();
                self.index--;
                if(self.index < 0) {
                    if(!cfg.circular) {
                        return;
                    }
                    self.index = listLens - 1;
                }
                self._goto(self.index);
            });
            
        }
        
        // 下一頁按鈕 next
        if(next.length > 0) {
            $(next,container).unbind('click').bind('click',function(e){

                self.index = self.getSelectedItem();
                self.index++;
                if(self.index >= listLens) {
                    if(!cfg.circular) {
                        return;
                    }
                    self.index = 0;
                }
                self._goto(self.index);
            });
        }
        
        // 數字按鈕
        if(cfg.markupType == 0){
            if(navCls.length > 0) {
                container.on(cfg.triggerType,'.ks-switchable-nav li',function(e){
                    // 從新獲取下navCls 由於若是不從新獲取下，當頁面上有多個的狀況下 會有問題
                    var target = e.target,
                        targetParent = $(target).closest(container),
                        navCls = $('.ks-switchable-nav li',container);
                    var n = navCls.index(target);
                    self.index = n;
                    self._goto(self.index);
                    self._off();
                });
            }
        }else {
            if(triggerCls.length > 0) {
                container.on(cfg.triggerType,cfg.triggerCls,function(e){
                    // 從新獲取下navCls 由於若是不從新獲取下，當頁面上有多個的狀況下 會有問題
                    var target = e.target,
                        targetParent = $(target).closest(container),
                        triggerCls = $(cfg.triggerCls,container);
                    var n = triggerCls.index(target);
                    self.index = n;
                    self._goto(self.index);
                    self._off();
                });
            }    
        }
        // 鼠標移到容器裏面是否暫停 默認爲true
        if(cfg.pauseOnHover) {
            $(cfg.container).hover(function(e){
                self._off();
            },function(){
                if(!cfg.circular) {
                    return;
                }
                self._start(self.index);
            });
        }
        
    },
    /*
     * 當前第幾項被選中了
     * @method getSelectedItem
     * @return {index} 當前選中的索引
     */
     getSelectedItem: function(){
        var self = this,
            cfg = self.cfg;
        var navcls = $(cfg.contentCls + ' li',$(cfg.container));
        for(var i = 0; i < navcls.length; i++) {
            if($(navcls[i]).hasClass('isSelected')) {
                return i;
            }
        }
        return -1;
     }
    
 });
 var defaults = {
     container          : '',                        // 容器 必填
     contentCls         : '.list',
     prev                : '.prev',                  // 上一頁按鈕
     next               : '.next',                  // 下一頁按鈕
     triggerType        : "mouseover",                    // 觸發類型
     on                 : 'select',                 // 當前的class
     type                : "x",                        // 輪換類型 輪換效果類型。可設置爲："x"|"y"|"fade"|"toggle"
     speed                : 800,                        // 切換速度
     time                : 5000,                        // 自動輪換間隔時間
     auto                : true,                        // 是否自動輪播
     numBtn                : true,                        // 是否使用數字按鈕
     switchTo            : 2,                        // 默認切換到第一項
     pauseOnHover        : true,                        // 鼠標移到是否停頓
     circular           : true,                        // 是否循環切換, 默認爲 true
     markupType         : 0,                        // 可取0或者其餘數字 默認爲0 若是是其餘數字的話 能夠稍微自定義下
     triggerCls         : '.j-slide'                // 觸發class 通常狀況下不須要配置 當markupType爲1的時候 須要配置
 };

JS代碼初始化以下：

// 橫向滾動初始化
new Switchable({
    'container': '#slide_x',
    'auto':false
},function(self){
    //console.log(self.index);
});
// 縱向滾動初始化代碼
new Switchable({
    'container': '#slide_y',
    'type':'y',
    'switchTo':0
},function(self){
            
});
// fadeIn效果
new Switchable({
    'container': '#slide_z',
    'type':'fade',
    'speed':600
},function(self){
            
});

// fadeIn平滑點效果
new Switchable({
    'container': '#slide_zz',
    'type':'animate',
    'speed':600
},function(self){
            
});
        
// 隱藏顯示效果
new Switchable({
    'container': '#slide_show',
    'type':'toggle',
    'speed':600
},function(self){
            
});

// 雙輪播fadeIn平滑點效果
new Switchable({
    'container': '#slide',
    'type':'fade',
    'speed':600,
    'markupType':1,
    'switchTo':0,
    'contentCls':'.slideContent'
},function(self){
            
});

// 我是雙輪播隱藏顯示效果
new Switchable({
    'container': '#slide2',
    'type':'toggle',
    'speed':600,
    'markupType':1,
    'switchTo':0,
    'contentCls':'.slideContent'
},function(self){
            
});

HTML和css代碼我就不貼了，下面我會提供demo下載的 或者直接看上面的JSfiddler連接效果。

圖片輪播demo下載 

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程