学步园

var scroller = function(){
  this.initialize.apply(this,arguments);
 }
 scroller.prototype = {
  initialize:function(tagsid,tagName,showsid,showTagName,currentShow,hovClass,clicked,autoPlay,interval){
  this.tagsid =tagsid;
  this.tagName = tagName;
  this.showsid = showsid;
  this.showTagName = showTagName;
  this.currentShow = currentShow;
  this.hovClass = hovClass.toLowerCase();
  this.clicked = clicked;
  this.autoPlay = autoPlay;
  this.interval = interval;
  this.create();
  },
  create:function(){
  var $this =this;
  var timer = null;
  var num = this.currentShow;
  var tags = this.$(this.tagsid).getElementsByTagName(this.tagName);
  var shows = this.$(this.showsid).getElementsByTagName(this.showTagName);
  if(tags.length != shows.length)return;
  this.show(shows,tags,this.currentShow);
  this.setIndex(tags);
  for(var i=0;i<tags.length;i++){
  switch(this.clicked){
  case 0:
  tags[i].onmouseover = function(){
  $this.show(shows,tags,this.index);
  }
  break;
  case 1:
  tags[i].onclick = function(){
  $this.show(shows,tags,this.index);
  }
  break;
  }
  }
  if(this.autoPlay == 1){
  timer = setInterval(play,$this.interval);
  var s=0;
  while(s<tags.length){
  tags[s].onmouseover = function(){Stop(this.index);}
  tags[s].onmouseout = function(){Goon(this.index);}
  s++;
  }
  }
  function Stop(m){
  $this.show(shows,tags,m);
  clearInterval(timer);
  }
  function Goon(m){
  num = m;
  timer = setInterval(play,$this.interval);
  }
  function play(){
  $this.show(shows,tags,num);
  num < tags.length-1 ? num++ : num=0;
  }
  },
  show:function(s,o,n){
  for(var i=0;i<o.length;i++){
  s[i].style.display = 'none'; 
  if(o[i].className.indexOf(this.hovClass)!= -1){
  o[i].className = o[i].className.replace(this.hovClass,'');
  }
  }
  s[n].style.display = 'block';
  o[n].className = o[n].className + ' ' + this.hovClass;
  },
  setIndex:function(o){
  for(var i=0;i<o.length;i++){
  o[i].index = i;
  }
  },
  $:function(o){
  if(o){return document.getElementById(o);}
  }
 }

 用法：例如 var myscroller = new scroller('tags','li','shows','div',0,'hov',0,1,1000);
 绑定id为tags的元素里面的li为标签，
 id为shows的元素里的div为展示容器，
 默认显示第1个:(0为第一个，1为第二个)，
 标签切换样式class:(标签上有class无所谓，已兼容多个样式),
 鼠标切换模式:(1为点击切换,0为不点击切换),
 自动播放:(1为自动播放,0为不自动播放),
 自动播放时间间隔:(1000 = 1秒)
 基本满足网站需要，功能有待完善中...