基于Jquery开发 自己的幻灯片组件效果

#slide2 .slide_c{height:164px}
#slide2 .type2{position:absolute;bottom:1px;left:1px;line-height:20px}
#slide2 .type2 li{background:#eee;color:#333;padding:7px 10px;margin-right:1px}
#slide2 .type2 .current{color:#c00;background:#ddd}
</style>
<h1>使用Jquery开发适合自己的幻灯片组件</h1>
<div class="box">
 <h3>type1:默认样式</h3>
 <div class="p_slide" id="slide1">
  <ul class="slide_c">
   <li style="background:#eee">1</li>
   <li style="background:#ccc">2</li>
   <li style="background:#eee">3</li>
   <li style="background:#ccc">4</li>
  </ul>
  <ul class="slide_t"></ul>
 </div>
</div>

<div class="box">
 <h3>type2:可任意自定义样式</h3>
 <div class="p_slide" id="slide2">
  <ul class="slide_c">
   <li style="background:#eee">1</li>
   <li style="background:#ccc">2</li>
   <li style="background:#eee">3</li>
   <li style="background:#ccc">4</li>
  </ul>
  <ul class="slide_t">
   <li>1</li>   <li>2</li>   <li>3</li>   <li>4</li>
  </ul>
 </div>
</div>
<script>
/*
 * 幻灯片组件
 * @id:容器ID
 * @timer:切换间隔时间
 * @opt:{type:幻灯片类型,默认1}
 */
var p_slide = function(id,timer,opt){
 if(!id){return;}
 this.box = $("#"+id);
 this.C = this.box.children(".slide_c");
 this.c = this.C.children("li");
 this.len = this.c.length;
 this.M = this.box.children(".slide_t");
 this.timer = timer || 4000;
 this.ie = /msie/.test(navigator.userAgent.toLowerCase());
 this.m = null;
 this.A = null;
 this.vml = [];
 this.nowIndex = 0;
 opt = opt || {};
 this.type = opt.type || 1;//幻灯片类型
 this.init();
}
p_slide.prototype = {
 init : function(){
  var T = this;
  if(this.type==1){
   var html = "";
   //ie下用vml创建圆形
   if(this.ie){
    document.namespaces.add("v", "urn:schemas-microsoft-com:vml"); //创建vml命名空间
    document.createStyleSheet().addRule("v\:oval", "behavior:url(#default#VML);display:inline-block;");
    for (var i = 0; i < this.len; i++) {
     this.vml[i] = document.createElement('<v:oval fillcolor="#fff" strokecolor="#fff" style="position:absolute;left:0;top:0;width:19px;height:19px"></v:oval>');
     this.vml[i].innerHTML = i+1;
    }
   }
   for(var i=1;i<=this.len;i++){    
    if (this.ie){
     html += '<li class="ie">';
    }else{
     html += '<li>';
    }
    html += i;
    html += '</li>';
   }   
   this.M.html(html).addClass("type1");
  }else if(this.type==2){
   this.M.addClass("type2");
  }
  this.m = this.M.children("li");
  
  //插入VML
  if (this.type==1&&this.ie) {
   for (var i = 0; i < this.len; i++) {
    this.m.eq(i).append(this.vml[i]);
   }
  } 
  
  this.bindEvent();
 },
 bindEvent : function(){
  var T = this;
  this.m.mouseover(function(){
   var m = $(this);
   window.clearInterval(T.A);
   T.change(m.index());
  })
  this.box.hover(function(){
   window.clearInterval(T.A);
  },function(){
   T.start();
  }).mouseout();
  T.change(T.nowIndex);
 },
 change : function(index){
  var T = this;
  index = (index>=this.len)?0:index;
  this.nowIndex = index ;
  var t = this.m.eq(index);
  t.addClass("current").siblings().removeClass("current");  
  if (this.type==1&&this.ie) {
   var m,v = this.vml[index];
   for(var i=0;i<this.len;i++){
    if(i==index){continue;}
    m = this.vml[i];
    m.fillcolor = '#fff';
    m.strokecolor = '#fff';
   }
   v.fillcolor = '#f60';
   v.strokecolor = '#f60';
  } 
  
  function animate(){
   var st = T.C.scrollTop(),
    St = T.c.outerHeight()*index,
    s = (St-st)/8,
    n = 15,
    A,
    Nt = st;
   A = setInterval(B,n);
   function B(){
    if(Math.abs(St-Nt)<=Math.abs(s)){
     clearInterval(A);
     T.C.scrollTop(St);
     return;
    }
    Nt += s;
    T.C.scrollTop(Nt);
   }
  }
  animate();
  
  this.nowIndex++;
 },
 start : function(){
  var T = this;
  this.A = window.setInterval(function(){
   T.change(T.nowIndex);
  },T.timer)
 }
}

new p_slide('slide1');
new p_slide('slide2',null,{type:2});
</script>
</body>
</html>