Slide图片轮播切换

<div id="gallery_box" class="gallery_box">
			<div class="mask_layer"></div>
			<ul class="view">
				<li class="sel">
					[url=#]<img class="pic" src="/www/web/travel/images/g1.gif" />[/url]
					[url=#]文字标题1[/url]
				</li>
				<li>
					[url=#]<img class="pic" src="/www/web/travel/images/g2.gif" />[/url]
					[url=#]文字标题2[/url]
				</li>
				<li>
					[url=#]<img class="pic" src="/www/web/travel/images/g1.gif" />[/url]
					[url=#]文字标题3[/url]
				</li>
				<li>
					[url=#]<img class="pic" src="/www/web/travel/images/g3.gif" />[/url]
					[url=#]文字标题4[/url]
				</li>
			</ul>
			<ul class="num">
				<li class="sel">[url=javascript:;]1[/url]</li>
				[*][url=javascript:;]2[/url]

				[*][url=javascript:;]3[/url]

				[*][url=javascript:;]4[/url]

			</ul>
		</div>

.gallery_box{position:relative;width:400px;height:250px;overflow:hidden;background-color:#fff;}
.gallery_box ul,.gallery_box li{margin:0;padding:0;list-style-type:none;}
.gallery_box a,.gallery_box a:hover{text-decoration:none;}
.gallery_box .mask_layer{position:absolute;left:0;bottom:0;width:100%;height:40px;z-index:1;background-color:#000;-moz-opacity:0.5;filter:alpha(opacity=50);opacity:0.7;}

.gallery_box .num{position:absolute;z-index:2;right:10px;bottom:5px;text-align:left;text-align:center;}
.gallery_box .num li{display:inline;float:left;}
.gallery_box .num li a{display:inline-block;width:15px;height:15px;line-height:15px;padding:2px;margin:0 2px;border:1px solid #ffcc00;color:#fff;}
.gallery_box .num li.sel a,.gallery_box .num li  a:hover{background-color:#f00;}
/*default*/
.gallery_box .pic{border:none;width:400px;height:250px;}
.gallery_box .view li.sel a.title{position:relative;top:-30px;color:#fff;z-index:2;}
.gallery_box .view li{display:none;}
.gallery_box .view li.sel{display:block;}
/*For slide top*/
.gallery_box .slideTop li{display:block;}
/*For slide left*/
.gallery_box .slideLeft {width:10000px;overflow:hidden;}
.gallery_box .slideLeft li{display:inline;float:left;}
.gallery_box .slideLeft li a{display:block;}

/**
     * @description 简单的图片轮播切换。
     * @author shawn
     * @date 2012-03-01
     * @param {} cfg
     */
    function Slide(cfg){
        this.cfg = {
            interval:3,
            dir:null //left || top
        };
        if(typeof cfg == 'object'){
	        for(var i in cfg){
	           this.cfg[i] = cfg[i];   
	        }
        }else if(typeof cfg == 'string'){
            this.cfg['id'] = cfg;
        }
        this.init();
    }
    Slide.prototype = {
        numBox:null,
        picBox: null,
        pause:false,
        cur:0,
        
        init:function(){
            var el = document.getElementById(this.cfg.id);
            var ulBox = el.getElementsByTagName('ul');
            this.picBox = ulBox[0];
            this.numBox = ulBox[1];
            
            if(this.cfg.dir === 'top'){
                this._T = true;
                this.picBox.className = this.picBox.className + ' slideTop';
            }else if(this.cfg.dir === 'left'){
                this._L = true;
                this.picBox.className = this.picBox.className + ' slideLeft';
            }
            this.initEvent();
            this.initTimer();
        },
        initEvent:function(){
            var that = this;
            this.numBox.onmouseover = function(e){
                var event = window.event || e;
                var target = event.srcElement || event.target;
                if(target.nodeType == 1 && target.tagName.toUpperCase() == 'A'){
                    that.pause = true;
                    clearInterval(that.timer);
                    that.timer = null;
                    var idx = parseInt(target.innerHTML,10);
                    that.onSlide(idx);
                }
            };
            this.numBox.onmouseout = function(e){
                that.pause = false;
                if(!that.timer){
                    that.initTimer();
                }
            };
        },
        initTimer:function(){
            var that = this;
            this.timer = setInterval(function(){
                if(!that.pause){
                    that.onSlide.call(that);
                }
            },this.cfg.interval * 1000);
        },
        onSlide: function(idx){
            var liEl = this.picBox.getElementsByTagName('li'),
                liEl2 = this.numBox.getElementsByTagName('li');
            var size = 0;
            if(this._T){
                size = liEl[0].offsetHeight;
            }else if(this._L){
                size = liEl[0].offsetWidth;
            }
            
            var i = -1;
            while(liEl2[++i]){
                liEl[i].className = '';
                liEl2[i].className = '';
            }
            var pre = this.cur;
            if(idx){
                this.cur = idx -1;
            }else{
                this.cur += 1;
                this.cur = this.cur % liEl.length;
            }
            if(size == 0){
                liEl[this.cur].className = 'sel';
                liEl2[this.cur].className = 'sel';
            }else{
                var len = Math.abs(pre - this.cur)*size;
	            var step = Math.ceil(len/10);
	            var ml = 0;
	            var that = this;
	            this.pause = true;
                var animateT = setInterval(function(){
	                var sign = that.cur - pre > 0 ? 1:-1;
	                if(ml == 0){
	                    ml = pre * size;
	                }
	                ml += sign*step;
	                if(Math.abs(ml - that.cur*size) > step){
                        if(that._L){
	                       that.picBox.style.marginLeft = -ml + 'px';
                        }else{
                           that.picBox.style.marginTop = -ml + 'px';
                        }
	                }else{
                        if(that._L){
                           that.picBox.style.marginLeft = -that.cur*size + 'px';
                        }else{
                           that.picBox.style.marginTop = -that.cur*size + 'px';
                        }	                    
	                    that.pause = false;
	                    ml = 0;
	                    liEl[that.cur].className = 'sel';
	                    liEl2[that.cur].className = 'sel';
	                    clearInterval(animateT);
	                }                
	            },50);
            }
        }
        
    };

//示例：
new Slide({
        id: 'gallery_box',
        dir:'top',
        interval: 3
    });