JS图片Switchable切换大集合
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链接效果。