JS圖片切換大集合
利用週末2天把JS圖片切換常見效果封裝了下，比如：輪播，顯示隱藏，淡入淡出等。廢話不多說，直接看效果吧！JSFiddler連結如下：
當然由於上傳圖片時候 png圖片自動轉換成jpg 所以左右按鈕有透明，但是也沒有關係，我們最主要的是看看效果是什麼樣的，至於圖片大家可以替換。下面看看預設配置項吧！
如上面配置：都有註釋，其中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連結效果。