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

最新推荐文章于 2021-06-10 02:52:14 发布

powerx_yc

最新推荐文章于 2021-06-10 02:52:14 发布

阅读量597

点赞数

文章标签：测试

原文链接：http://www.cnblogs.com/hubcarl/archive/2010/07/03/1770378.html

版权

代码

执行左移右移函数：
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容器：

代码

< div style ="text-align:center; width:100%; margin:auto auto" >
                     < div class ="container" id ="idContainer" runat ="server"    >
                     </ div >
             </ div >
             
             
              < 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 >

下面是改变左右按钮可用状态

代码