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

执行左移右移函数：
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);
    }
};

在前天html加入div容器：

<!-- Icon scroll begin -->
            <div style="text-align:center; 100%; margin:auto auto">
                    <div class="container" id="idContainer" runat="server"  >
                    </div>
            </div>
            <!--end-->
            <!--左右滚动按钮-->
             <div class="defaultprenext">
             <table cellpadding=0 cellspacing=0 style="100%">
                 <tr>
                     <td style="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="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" />&nbsp; 
                               <img src="ImageV3/Default/graydot.png" id="Img2" />&nbsp;
                                <img src="ImageV3/Default/graydot.png" id="Img3" />
                           </div>
                        </div>
                     </td>
                     <td style="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";
    }
}