js 幻灯片

    <style type="text/css">   
img{  
border:0px;  
}  
.container, .container *{margin:0; padding:0;}  
 
.container{width:690px; height:250px; overflow:hidden;position:relative;}  
.container2{width:232px; height:60px; overflow:hidden;position:relative;}  
.slider{position:absolute;}  
.slider li{ list-style:none;display:inline;}  
.slider img{ width:690px; height:250px; display:block;} 
#idSlider img{ width:232px; height:60px; display:block;}  
.slider2{width:2100px;}  
.slider2 li{float:left;}  
 
.num{ position:absolute; right:5px; bottom:5px;}  
.num li{  
    float: left;  
   color: #333;  
    text-align: center;  
    line-height: 16px;  
    width: 16px;  
    height: 16px;  
   font-family: Arial;  
    font-size: 12px;  
    cursor: pointer;  
    overflow: hidden;  
    margin: 3px 1px;  
    border: 1px solid #666;  
   background-color: #fff;  
}  
.num li.on{  
   color: #fff;  
    line-height: 21px;  
   width: 21px;  
    height: 21px;  
  font-size: 16px;  
    margin: 0 1px;  
   border: 0;  
   background-color: #666;  
    font-weight: bold;  
}  
</style>

        <script type="text/javascript">  
var $ = function (id) {  
    return "string" == typeof id ? document.getElementById(id) : id;  
};  
 
var Class = {  
  create: function() {  
    return function() {  
     this.initialize.apply(this, arguments);  
    }  
  }  
}  
 
Object.extend = function(destination, source) {  
    for (var property in source) {  
        destination[property] = source[property];  
    }  
   return destination;  
}  
 
var TransformView = Class.create();  
TransformView.prototype = {  
  //容器对象,滑动对象,切换参数,切换数量  
  initialize: function(container, slider, parameter, count, options) {  
    if(parameter <= 0 || count <= 0) return;  
   var oContainer = $(container), oSlider = $(slider), oThis = this;  
 
   this.Index = 0;//当前索引  
     
    this._timer = null;//定时器  
    this._slider = oSlider;//滑动对象  
    this._parameter = parameter;//切换参数  
    this._count = count || 0;//切换数量  
    this._target = 0;//目标参数  
      
   this.SetOptions(options);  
      
    this.Up = !!this.options.Up;  
   this.Step = Math.abs(this.options.Step);  
    this.Time = Math.abs(this.options.Time);  
    this.Auto = !!this.options.Auto;  
    this.Pause = Math.abs(this.options.Pause);  
    this.onStart = this.options.onStart;  
   this.onFinish = this.options.onFinish;  
      
    oContainer.style.overflow = "hidden";  
    oContainer.style.position = "relative";  
      
   oSlider.style.position = "absolute";  
    oSlider.style.top = oSlider.style.left = 0;  
  },  
  //设置默认属性  
  SetOptions: function(options) {  
   this.options = {//默认值  
        Up:         true,//是否向上(否则向左)  
        Step:       7,//滑动变化率  
        Time:       35,//滑动延时  
        Auto:       true,//是否自动转换  
      Pause:      5000,//停顿时间(Auto为true时有效)  
       onStart:    function(){},//开始转换时执行  
        onFinish:   function(){}//完成转换时执行  
    };  
    Object.extend(this.options, options || {});  
  },  
  //开始切换设置  
  Start: function() {  
    if(this.Index < 0){  
        this.Index = this._count - 1;  
   } else if (this.Index >= this._count){ this.Index = 0; }  
     
    this._target = -1 * this._parameter * this.Index;  
    this.onStart();  
    this.Move();  
  },  
  //移动  
  Move: function() {  
    clearTimeout(this._timer);  
    var oThis = this, style = this.Up ? "top" : "left", iNow = parseInt(this._slider.style[style]) || 0, iStep = this.GetStep(this._target, iNow);  
      
   if (iStep != 0) {  
        this._slider.style[style] = (iNow + iStep) + "px";  
       this._timer = setTimeout(function(){ oThis.Move(); }, this.Time);  
   } else {  
        this._slider.style[style] = this._target + "px";  
        this.onFinish();  
        if (this.Auto) { this._timer = setTimeout(function(){ oThis.Index++; oThis.Start(); }, this.Pause); }  
    }  
  },  
  //获取步长  
  GetStep: function(iTarget, iNow) {  
    var iStep = (iTarget - iNow) / this.Step;  
    if (iStep == 0) return 0;  
    if (Math.abs(iStep) < 1) return (iStep > 0 ? 1 : -1);  
    return iStep;  
  },  
  //停止  
  Stop: function(iTarget, iNow) {  
    clearTimeout(this._timer);  
    this._slider.style[this.Up ? "top" : "left"] = this._target + "px";  
  }  
};  
 
window.onload=function(){  
   function Each(list, fun){  
        for (var i = 0, len = list.length; i < len; i++) { fun(list[i], i); }  
   };  

    var objs2 = $("idNum12").getElementsByTagName("li");  
     
   var tv2 = new TransformView("idTransformView2", "idSlider2", 690, 3, {  
        onStart: function(){ Each(objs2, function(o, i){ o.className = tv2.Index == i ? "on" : ""; }) },//按钮样式  
        Up: false 
   });  
      
    tv2.Start();  
      
   Each(objs2, function(o, i){  
        o.onmouseover = function(){  
            o.className = "on";  
           tv2.Auto = false;  
            tv2.Index = i;  
            tv2.Start();  
       }  
       o.onmouseout = function(){  
           o.className = "";  
           tv2.Auto = true;  
           tv2.Start();  
       }  
   })  
   
  $("idStop1").onclick = function(){ tv2.Auto = false; tv2.Stop(); }  
   $("idStart1").onclick = function(){ tv2.Auto = true; tv2.Start(); }  
    $("idNext1").onclick = function(){ tv2.Index++; tv2.Start(); }  
    $("idPre1").onclick = function(){ tv2.Index--;tv2.Start(); }  
    $("idFast1").onclick = function(){ if(--tv2.Step <= 0){tv2.Step = 1;} }  
    $("idSlow1").onclick = function(){ if(++tv2.Step >= 10){tv2.Step = 10;} }  
   $("idReduce1").onclick = function(){ tv2.Pause-=1000; if(tv2.Pause <= 0){tv2.Pause = 0;} }  
  $("idAdd1").onclick = function(){ tv2.Pause+=1000; if(tv2.Pause >= 5000){tv2.Pause = 5000;} }  
      
    $("idReset1").onclick = function(){  
       tv2.Step = Math.abs(tv2.options.Step);  
        tv2.Time = Math.abs(tv2.options.Time);  
        tv2.Auto = !!tv2.options.Auto;  
        tv2.Pause = Math.abs(tv2.options.Pause);  
  }  
      
}  
        </script>

 

<div class="container" id="idTransformView2">
            <ul class="slider slider2" id="idSlider2">
                <li><a href="http://www.google.com">
                    <img src="23.jpg" /></a></li>
                <li><a href="Default2.aspx">
                    <img src="挖煤.jpg" /></a></li>
                <li><a href="Default.aspx">
                    <img src="23.jpg" /></a></li>
            </ul>
            <ul class="num" id="idNum12">
                <li>1</li>
                <li>2</li>
                <li>3</li>
            </ul>
        </div>