JS图片Switchable切换大集合

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);
 
        // 上一页按钮 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链接效果。

图片轮播demo下载