首页 > 代码库 > JS图片Switchable切换大集合

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