Slide图片轮播切换。
<div id="gallery_box" src="/www/web/travel/images/g1.gif" />[/url][url=#]文字标题1[/url]</li><li>[url=#]<img src="/www/web/travel/images/g2.gif" />[/url][url=#]文字标题2[/url]</li><li>[url=#]<img src="/www/web/travel/images/g1.gif" />[/url][url=#]文字标题3[/url]</li><li>[url=#]<img src="/www/web/travel/images/g3.gif" />[/url][url=#]文字标题4[/url]</li></ul><ul name="code">.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 });