JS实现的相册图片左右滚动完整实例

var $get = function(id) {  return "string" == typeof id ? document.getElementById(id) : id;};var Extend = function(destination, source) {  for (var property in source) {    destination[property] = source[property];  }  return destination;}var CurrentStyle = function(element) {  return element.currentStyle || document.defaultView.getComputedStyle(element, null);}var Bind = function(object, fun) {  var args = Array.prototype.slice.call(arguments).slice(2);  return function() {    return fun.apply(object, args.concat(Array.prototype.slice.call(arguments)));  }}var Tween = {  Quart: {    easeOut: function(t, b, c, d) {      return -c * ((t = t / d - 1) * t * t * t - 1) + b;    }  },  Back: {    easeOut: function(t, b, c, d, s) {      if (s == undefined) s = 1.70158;      return c * ((t = t / d - 1) * t * ((s + 1) * t + s) + 1) + b;    }  },  Bounce: {    easeOut: function(t, b, c, d) {      if ((t /= d) < (1 / 2.75)) {        return c * (7.5625 * t * t) + b;      } else if (t < (2 / 2.75)) {        return c * (7.5625 * (t -= (1.5 / 2.75)) * t + .75) + b;      } else if (t < (2.5 / 2.75)) {        return c * (7.5625 * (t -= (2.25 / 2.75)) * t + .9375) + b;      } else {        return c * (7.5625 * (t -= (2.625 / 2.75)) * t + .984375) + b;      }    }  }}//容器对象,滑动对象,切换数量var SlideTrans = function(container, slider, count, options) {  this._slider = $get(slider);  this._container = $get(container); //容器对象  this._timer = null; //定时器  this._count = Math.abs(count); //切换数量  this._target = 0; //目标值  this._t = this._b = this._c = 0; //tween参数  this.Index = 0; //当前索引  this.SetOptions(options);  this.Auto = !!this.options.Auto;  this.Duration = Math.abs(this.options.Duration);  this.Time = Math.abs(this.options.Time);  this.Pause = Math.abs(this.options.Pause);  this.Tween = this.options.Tween;  this.onStart = this.options.onStart;  this.onFinish = this.options.onFinish;  var bVertical = !!this.options.Vertical;  this._css = bVertical ? "top" : "left"; //方向  //样式设置  var p = CurrentStyle(this._container).position;  p == "relative" || p == "absolute" || (this._container.style.position = "relative");  this._container.style.overflow = "hidden";  this._slider.style.position = "absolute";  this.Change = this.options.Change ? this.options.Change :    this._slider[bVertical ? "offsetHeight" : "offsetWidth"] / this._count;};SlideTrans.prototype = {  //设置默认属性  SetOptions: function(options) {    this.options = {//默认值    Vertical: true, //是否垂直方向（方向不能改）      Auto: false, //是否自动      Change: 0, //改变量      Duration: 50, //滑动持续时间      Time: 10, //滑动延时      Pause: 2000, //停顿时间(Auto为true时有效)      onStart: function() { }, //开始转换时执行      onFinish: function() { }, //完成转换时执行      Tween: Tween.Quart.easeOut//tween算子    };    Extend(this.options, options || {});  },  //开始切换  Run: function(index) {    //修正index    index == undefined && (index = this.Index);    index < 0 && (index = this._count - 1) || index >= this._count && (index = 0);    //设置参数    this._target = -Math.abs(this.Change) * (this.Index = index);    this._t = 0;    this._b = parseInt(CurrentStyle(this._slider)[this.options.Vertical ? "top" : "left"]);    this._c = this._target - this._b;    this.onStart();    this.Move();  },  //移动  Move: function() {    clearTimeout(this._timer);    //未到达目标继续移动否则进行下一次滑动    if (this._c && this._t < this.Duration) {      this.MoveTo(Math.round(this.Tween(this._t++, this._b, this._c, this.Duration)));      this._timer = setTimeout(Bind(this, this.Move), this.Time);    } else {      this.MoveTo(this._target);      this.Auto && (this._timer = setTimeout(Bind(this, this.Next), this.Pause));    }  },  //移动到  MoveTo: function(i) {    this._slider.style[this._css] = i + "px";  },  //下一个  Next: function() {    this.Run(++this.Index);  },  //上一个  Previous: function() {    this.Run(--this.Index);  },  //停止  Stop: function() {    clearTimeout(this._timer); this.MoveTo(this._target);  }};

<!-- Icon scroll begin --><div style="text-align:center; width:100%; margin:auto auto">  <div class="container" id="idContainer" runat="server" >  </div></div><!--end--><!--左右滚动按钮--><div class="defaultprenext"><table cellpadding=0 cellspacing=0 style="width:100%"> <tr>   <td style="width:40%; text-align:left; padding-left:6px">   <img id="ImgPre" alt="" src="ImageV3/Default/pre-gray.png" />   <span class="pager" id="Pre" style="color:Gray">Pre</span></td>   <td style="width:20%; text-align:center">     <div class="defaultprenextmid">      <div style="height:10px; vertical-align:middle; line-height:10px">       <img src="ImageV3/Default/greendot.png" id="Img1" />         <img src="ImageV3/Default/graydot.png" id="Img2" />         <img src="ImageV3/Default/graydot.png" id="Img3" />      </div>    </div>   </td>   <td style="width:40%; text-align:right; padding-right:6px">    <span class="pager" id="Next" style="color:#2f6417">Next</span>    <img id="ImgNext" alt="" src="ImageV3/Default/next-green.png" />   </td> </tr></table></div>

var imgNum = $get("idContainer").getElementsByTagName("img").length;var pre = $get("Pre");var next = $get("Next");var i = 0;if (imgNum > 0) {  var st = new SlideTrans("idContainer", "idSlider", 3, { Vertical: false });  if (i < 2) {    $get("Next").onclick = function() {      if (i < 2) {        st.Next();        i++;        if (i == 1) {          $get("ImgPre").src = "ImageV3/Default/pre-green.png";          pre.style.color = "#2f6417";        }        if (i == 2) {          $get("ImgNext").src = "ImageV3/Default/next-gray.png";          next.style.color = "Gray";        }        ChangePicIndex(i);      }    }  }  $get("Pre").onclick = function() {    if (i > 0) {      st.Previous();      $get("ImgNext").src = "ImageV3/Default/next-green.png";      next.style.color = "#2f6417";      i--;      if (i == 0) {        $get("ImgPre").src = "ImageV3/Default/pre-gray.png";        pre.style.color = "Gray";      }      ChangePicIndex(i);    }  }  st.Run();}function ChangePicIndex(index) {  switch (index) {    case 1:      $get("Img1").src = "ImageV3/Default/graydot.png";      $get("Img2").src = "ImageV3/Default/greendot.png";      $get("Img3").src = "ImageV3/Default/graydot.png";      break    case 2:      $get("Img1").src = "ImageV3/Default/graydot.png";      $get("Img2").src = "ImageV3/Default/graydot.png";      $get("Img3").src = "ImageV3/Default/greendot.png";      break    default:      $get("Img1").src = "ImageV3/Default/greendot.png";      $get("Img2").src = "ImageV3/Default/graydot.png";      $get("Img3").src = "ImageV3/Default/graydot.png";  }}