JS圖片切換大集合

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

? ?想看JS輪播切換效果請點擊我！

? ?當然由于上傳圖片時候 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);// 上一頁按鈕 previf(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);});}// 下一頁按鈕 nextif(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();});} }// 鼠標移到容器里面是否暫停 默認為trueif(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', // 當前的classtype : "x", // 輪換類型 輪換效果類型。可設置為："x"|"y"|"fade"|"toggle"speed : 800, // 切換速度time : 5000, // 自動輪換間隔時間auto : true, // 是否自動輪播numBtn : true, // 是否使用數字按鈕switchTo : 2, // 默認切換到第一項pauseOnHover : true, // 鼠標移到是否停頓circular : true, // 是否循環切換, 默認為 truemarkupType : 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下載?

轉載于:https://www.cnblogs.com/tugenhua0707/p/3815882.html

總結

以上是生活随笔為你收集整理的JS图片Switchable切换大集合的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。