代码改变世界

JS图片Switchable切换大集合

2014-06-30 00:05 龙恩0707 阅读(...) 评论(...) 编辑 收藏

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下载