JS圖片Switchable切換大集合

龍恩0707發表於2014-06-30

JS圖片切換大集合

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

當然由於上傳圖片時候 png圖片自動轉換成jpg 所以左右按鈕有透明，但是也沒有關係，我們最主要的是看看效果是什麼樣的，至於圖片大家可以替換。下面看看預設配置項吧！

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個配置項來設定，如下圖所示：

1. 其他的單輪播一般情況下可以不需要這2個配置項，當然你為了擴充套件性，也可以加上這2個切忌：markupType 不為0才生效，當然一般情況下希望能設定數字其實字串也可以，但是一般情況下用數字吧！

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

3. 在做縱向滾動時候在IE7下注意有個小小的bug 每個li縱向有3px間隙需要在li加display：inline可以解決，其他的瀏覽器不需要(包括IE6).

4. 例項化new的時候有2個引數其一是cfg物件，可以以物件的方式傳引數，其二是callbck回撥函式。此回撥是切換到第幾項的時候的回撥。

5. 數字按鈕支援自定義比如我自己可以在程式碼上加，5，6，7，8，而不是1，2，3，4,一般情況下數字1，2，3，4按鈕是根據圖片的多少來自動生成，其中css樣式要自己寫。

如下程式碼：

<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下載

switchable圖片切換
2013-10-13
js圖片切換例項
2018-10-21
JS
網頁Banner圖片切換js的使用
2012-10-25
網頁JS
馬賽克效果的JS圖片切換程式碼
2016-07-11
JS
用原生JS實現圖片輪播切換功能
2018-06-06
JS
JavaScript 圖片切換展示效果
2009-09-24
JavaScript
js圖片轉換
2020-11-04
JS
jQuery手風琴圖片切換
2018-02-06
jQuery
JS實現動態瀑布流及放大切換圖片效果(js案例)
2019-05-23
JS
jQuery 圖片垂直切換效果詳解
2018-12-18
jQuery
CSS滑鼠移動圖片切換功能
2017-02-21
CSS
CSS滑鼠懸浮圖片模糊切換效果
2018-04-25
CSS
搭建圖床-切換本站圖片至自建服務
2024-03-12
圖床
解決js控制元素背景圖片切換時的閃屏問題
2020-12-28
JS
幻燈片放映模式切換windows terminal背景圖片
2021-04-10
模式Windows
點選按鈕實現圖片切換效果
2017-04-12
巧妙的有css合併圖片解決tab切換的背景圖片
2017-11-17
CSS
css滑鼠浮劃過切換按鈕背景圖片
2018-07-17
CSS
滑鼠懸浮實現圖片動畫上下切換效果
2017-04-15
動畫
Qt中按鈕背景圖片的切換設定
2013-03-19
QT
JS+CSS帶數字和左右按鈕可控制切換的圖片幻燈
2012-10-01
JSCSS
css實現滑鼠滑過切換背景圖片程式碼
2017-03-04
CSS
jquery實現的具有漸變效果的圖片切換
2017-04-01
jQuery
jQuery選項卡切換圖片效果程式碼例項
2017-04-06
jQuery
android實現多圖片放大縮小的切換
2017-04-24
Android
簡單的圖片間隔指定時間切換效果
2017-02-19
JQuery實現簡單美觀的圖片切換效果
2011-09-08
jQuery
JS動態相簿--隨滑鼠所至切換封面圖
2020-10-26
JS
js點選實現多圖順序切換和迴圈切換效果程式碼
2017-04-12
JS
nodejs圖片轉換位元組儲存
2015-10-21
NodeJS
win10怎麼自定義背景圖切換_win10自定義背景圖片隨機切換的步驟
2020-06-02
Win10隨機
圖片格式轉換，JPG圖片轉換成PDF
2018-08-07
javascript實現的圖片簡單切換程式碼例項
2017-04-03
JavaScript
js和css3實現的圖片立體滾動切換效果程式碼例項
2017-04-13
JSCSSS3
簡單介紹Vue實現滑鼠懸浮切換圖片src
2022-04-07
Vue
CSS滑鼠經過連結切換背景圖片例項程式碼
2017-11-01
CSS
jQuery實現的滑鼠滑過切換圖片程式碼例項
2017-02-26
jQuery
php圖片上傳之圖片轉換
2015-01-14
PHP

JS圖片Switchable切換大集合

相關文章