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

本文实例讲述了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);

}

};

在前天html加入div容器：

Pre

Next

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

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";

}

}

希望本文所述对大家JavaScript程序设计有所帮助。