先给大家看下效果展示图
以下为详细代码：
复制代码 代码如下:
function lgy_picswitch(option){
    this.owrap = this.getid(option.wrapid); //最外层元素
    this.olistwrap = this.getnodebyclassname(this.owrap,'gy_picswitch_listwrap')[0];
    this.oul = this.olistwrap.getelementsbytagname('ul')[0];
    this.obtnprev = this.getnodebyclassname(this.owrap,'gy_picswitch_prev')[0];
    this.obtnnext = this.getnodebyclassname(this.owrap,'gy_picswitch_next')[0];
    this.nlen = this.oul.getelementsbytagname('li').length; //图片总数
    this.nscollcount = option.scrollcount; //每次滚动的数量
    this.nscolllen = math.ceil(this.nlen/option.scrollcount); // 切换判断的最大值
    this.nswitchwidth = 0; //每次切换移动的距离，在代码里面动态获取值
    this.nindex = 0; //切换图片的当前索引
    this.timer = null; //切换图片的引值
    this.int();
}
lgy_picswitch.prototype = {
    getid:function(id){
        return document.getelementbyid(id);
    },
    getnodebyclassname:function(parent,classname){
        var classelements = new array();
        var els = parent.getelementsbytagname('*');
        var elslen = els.length;
        var pattern = new regexp((^|\\s)+classname+(\\s|$));
        for (i = 0, j = 0; i                 if ( pattern.test(els[i].classname) ) {
                        classelements[j] = els[i];
                        j++;
                }
        }
        return classelements;
    },
    getcss:function(node,value)
    {
        return node.currentstyle?node.currentstyle[value]:getcomputedstyle(node,null)[value];
    },
    setcss:function(node,val){
        for(var v in val){
            node.style.csstext += ';'+ v +':'+val[v];
        }
    },
    movefn:function(node,value,targetvalue,callback){
        var _that = this;
        clearinterval(this.timer);
        this.timer = setinterval(function()
        {
            var val = parsefloat(_that.getcss(node,value));
            var speed = ( targetvalue- val )/8;
            speed = speed>0?math.ceil(speed):math.floor(speed);
            if(speed ==0)
            {
                clearinterval(_that.timer);
                callback&&callback();
            }
            else
            {                   
                node.style[value] = ( val + speed ) +'px';                   
            }
},20);
    },
    picchange:function(){
        this.movefn(this.oul,'marginleft',-this.nindex*this.nswitchwidth);
    },
    cancelbubble:function(e){
        e.stoppropagation?e.stoppropagation():e.cancelbubble = true;
    },
    btnisshow:function(){
        this.setcss(this.obtnnext,{'display':'block'});
        this.setcss(this.obtnprev,{'display':'block'});
        if( this.nindex == 0 ) this.setcss(this.obtnprev,{'display':'none'});
        if( this.nindex ==(this.nscolllen-1) ) this.setcss(this.obtnnext,{'display':'none'});
    },
    btnprev:function(){
        var _that = this;
        this.obtnprev.onclick = function(e){
            var e = e || window.event;
            _that.cancelbubble(e);
            if(_that.nindex != 0 ) {
                _that.nindex--;
                _that.picchange();
                _that.btnisshow();
            }
        }
    },
    btnnext:function(){
        var _that = this;
        this.obtnnext.onclick = function(e){
            var e = e || window.event;
            _that.cancelbubble(e);
            if(_that.nindex != (_that.nscolllen-1) ) {
                _that.nindex++;
                _that.picchange();
                _that.btnisshow();
            }
        }
    },
    int:function(){
        //动态获取移动的宽度
        var oli = this.oul.getelementsbytagname('li')[0],
            oli_w = oli.offsetwidth + parseint(this.getcss(oli,'marginleft')) + parseint(this.getcss(oli,'marginright'));
        this.nswitchwidth = oli_w*this.nscollcount;
        //按钮显示初始化
        this.btnisshow();
        //左右切换
        this.btnprev();
        this.btnnext();
    }
}
html代码：
复制代码 代码如下:
/*
* html结构必需是以下：外层id名，自己传入 如下面的：id=gy_picswitch02 ，id名，自己随便给
但，里面的结构必需一样，包括类名classname
参数：'wrapid':'xxxx'，最外层的id名
      'scrollcount':5，滚动的数量
复制代码 代码如下:
*
*/
//实例化
 new lgy_picswitch({'wrapid':'gy_picswitch','scrollcount':5});
是不是很方便的功能呢，使用也很简单，这里推荐给小伙伴，希望对大家能有所帮助