JS圖片切換大集合

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

? ?想看JS輪播切換效果請點(diǎn)擊我！

? ?當(dāng)然由于上傳圖片時(shí)候 png圖片自動(dòng)轉(zhuǎn)換成jpg 所以左右按鈕有透明，但是也沒有關(guān)系，我們最主要的是看看效果是什么樣的，至于圖片大家可以替換。下面看看默認(rèn)配置項(xiàng)吧！? ?

? container	'',?????外層容器 必填項(xiàng) 默認(rèn)為空
?contentCls	?'.list', ? ? 內(nèi)容所在的容器 默認(rèn)為'.list'
?prev	?'.prev' ? 上一頁按鈕 如果沒有的話 不配置 默認(rèn)為'.prev'
?next	?'.next' ? ?上一頁按鈕 如果沒有的話 不配置 默認(rèn)為'.next'
triggerType	?'mouseover' , ? 觸發(fā)類型 默認(rèn)為'mouseover'
?on	?'select' , ? ? ? ? ? ? 當(dāng)前被選中的class類 默認(rèn)為'select'
type	?'x' , ? ? ? ? ? ??輪換類型 輪換效果類型。可設(shè)置為："x"|"y"|"fade"|"toggle | animate" ?x為橫向滾動(dòng) y為縱向滾動(dòng)，fade為淡入淡出效果 toggle為顯示隱藏效果，animate為動(dòng)畫效果(類似于fade效果)
speed	?800 ,???????????? 切換速度(單位：毫秒)
time	?5000, ? ? ? ? ? ??自動(dòng)輪換間隔時(shí)間(單位：毫秒)
auto	?true,???????????? 是否自動(dòng)輪播(boolean布爾型) 默認(rèn)為true
numBtn	?true , ? ? ? ? ? ?是否需要數(shù)字按鈕(boolean|布爾型) 默認(rèn)為true
switchTo	?0 , ? ? ? ? ? ? ? ?切換到第幾項(xiàng) 默認(rèn)為第一項(xiàng)
pauseOnHover	?true , ? ? ? ? ? ?鼠標(biāo)移到容器里面是否停止?jié)L動(dòng) 默認(rèn)停止
circular	?true , ? ? ? ? ? ?是否循環(huán)切換(boolean|布爾型) 默認(rèn)為true
markupType	?0 , ? ? ? ? ? ?可取0或者其他數(shù)字 默認(rèn)為0 如果是其他數(shù)字的話 可以稍微自定義下(默認(rèn)情況下不需要做任何改動(dòng)，如果想自定義的話，可以設(shè)置，比如：雙輪播效果，左邊有1，2，3，4數(shù)字，右邊有5，6，7，8數(shù)字效果)。
triggerCls	?'' ? ?觸發(fā)class 一般情況下不需要配置 當(dāng)markupType不為0的時(shí)候 需要配置類名class

如上面配置：都有注釋，其中markupType 和?triggerCls 2個(gè)配置項(xiàng)是針對擴(kuò)展性輪播而做的配置項(xiàng)，比如如下這種輪播效果，可以通過這2個(gè)配置項(xiàng)來設(shè)置，如下圖所示：

1. 其他的單輪播 一般情況下可以不需要這2個(gè)配置項(xiàng)，當(dāng)然你為了擴(kuò)展性，也可以加上這2個(gè) 切忌：markupType 不為0才生效，當(dāng)然一般情況下希望能設(shè)置數(shù)字 其實(shí)字符串也可以，但是一般情況下用數(shù)字吧！

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

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

4. 實(shí)例化new的時(shí)候 有2個(gè)參數(shù) 其一是cfg對象，可以以對象的方式傳參數(shù)，其二是callbck回調(diào)函數(shù)。此回調(diào)是切換到第幾項(xiàng)的時(shí)候的回調(diào)。

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

? ? 如下代碼：

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

? ?切記：菜單項(xiàng)容器ul類一定要有?ks-switchable-nav 這個(gè)類名。且內(nèi)容外部容器都用ul li來寫代碼 不要用div 因?yàn)槲襃S代碼直接根據(jù)容器下的li來獲取dom節(jié)點(diǎn)的，沒有根據(jù)某個(gè)class來獲取(因?yàn)楫?dāng)初考慮，我不想在某項(xiàng)下面都加一個(gè)class，代碼看起來也不怎么好看)，所以內(nèi)容項(xiàng)對html代碼有要求的 要想實(shí)現(xiàn)效果 內(nèi)容項(xiàng)都用ul或者ol li標(biāo)簽來寫代碼。

下面是所有的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,{/** 初始化 是否生成數(shù)字按鈕等事件操作*/_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);// 開始輪播函數(shù) 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);}},/** 具體輪播到第幾項(xiàng)* @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);}},/** 選中當(dāng)前的項(xiàng)* @method _currentItem {private}* @param {n} 當(dāng)前的索引*/_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);});}// 數(shù)字按鈕if(cfg.markupType == 0){if(navCls.length > 0) {container.on(cfg.triggerType,'.ks-switchable-nav li',function(e){// 重新獲取下navCls 因?yàn)槿绻恢匦芦@取下，當(dāng)頁面上有多個(gè)的情況下 會(huì)有問題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 因?yàn)槿绻恢匦芦@取下，當(dāng)頁面上有多個(gè)的情況下 會(huì)有問題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();});} }// 鼠標(biāo)移到容器里面是否暫停 默認(rèn)為trueif(cfg.pauseOnHover) {$(cfg.container).hover(function(e){self._off();},function(){if(!cfg.circular) {return;}self._start(self.index);});}},/** 當(dāng)前第幾項(xiàng)被選中了* @method getSelectedItem* @return {index} 當(dāng)前選中的索引*/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", // 觸發(fā)類型on : 'select', // 當(dāng)前的classtype : "x", // 輪換類型 輪換效果類型。可設(shè)置為："x"|"y"|"fade"|"toggle"speed : 800, // 切換速度time : 5000, // 自動(dòng)輪換間隔時(shí)間auto : true, // 是否自動(dòng)輪播numBtn : true, // 是否使用數(shù)字按鈕switchTo : 2, // 默認(rèn)切換到第一項(xiàng)pauseOnHover : true, // 鼠標(biāo)移到是否停頓circular : true, // 是否循環(huán)切換, 默認(rèn)為 truemarkupType : 0, // 可取0或者其他數(shù)字 默認(rèn)為0 如果是其他數(shù)字的話 可以稍微自定義下triggerCls : '.j-slide' // 觸發(fā)class 一般情況下不需要配置 當(dāng)markupType為1的時(shí)候 需要配置};

JS代碼初始化如下：

// 橫向滾動(dòng)初始化 new Switchable({'container': '#slide_x','auto':false },function(self){//console.log(self.index); }); // 縱向滾動(dòng)初始化代碼 new Switchable({'container': '#slide_y','type':'y','switchTo':0 },function(self){}); // fadeIn效果 new Switchable({'container': '#slide_z','type':'fade','speed':600 },function(self){});// fadeIn平滑點(diǎn)效果 new Switchable({'container': '#slide_zz','type':'animate','speed':600 },function(self){});// 隱藏顯示效果 new Switchable({'container': '#slide_show','type':'toggle','speed':600 },function(self){});// 雙輪播fadeIn平滑點(diǎn)效果 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代碼我就不貼了，下面我會(huì)提供demo下載的 或者直接看上面的JSfiddler鏈接效果。

圖片輪播demo下載?

轉(zhuǎn)載于:https://www.cnblogs.com/tugenhua0707/p/3815882.html

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。