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链接效果。