JS特效详解:图片幻灯片切换

2024-09-06 12:41:00

字体：大中小

来源：转载

供稿：网友

序一（08/07/06）
看到 alibaba 的一个图片切换效果，感觉不错，想拿来用用。但代码一大堆的，看着昏，还是自己来吧。
由于有了做图片滑动展示效果的经验，做这个就容易得多了。
序二（09/03/19）
自写了 tween缓动之后就很想重新写过这个效果，近来有点时间，终于可以动手了。
除了改成tween缓动，也改进了程序算法，不过原理还是一样的。

效果预览：

运行代码框
<!doctype html public "-//w3c//dtd xhtml 1.0 transitional//en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="content-type" content="text/html; charset=gb2312" /><title>javascript 图片滑动切换效果</title><script type="text/javascript">var $ = 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 = $(slider);this._container = $(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: true,//是否自动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) {//修正indexindex == 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);}};</script></head><body><style type="text/css">.container, .container img{width:280px; height:200px;}.container{border:1px solid #333;}.container img{border:0;}</style><div class="container" id="idcontainer"><table id="idslider" border="0" cellpadding="0" cellspacing="0"><tr><td><a href="http://www.cnblogs.com/cloudgamer/archive/2009/01/06/tween.html"><img src="/articleimg/2009/09/7031/r_rt_1.jpg"/></a></td></tr><tr><td><a href="http://www.cnblogs.com/cloudgamer/archive/2008/07/21/imgcropper.html"><img src="/articleimg/2009/09/7031/r_rt_5.jpg"/></a></td></tr><tr><td><a href="http://www.cnblogs.com/cloudgamer/archive/2008/11/17/drag.html"><img src="/articleimg/2009/09/7031/r_rt_3.jpg"/></a></td></tr></table></div><br /><br /><style type="text/css">.num{ position:absolute; right:5px; bottom:5px;}.num li{float: left;list-style:none;color: #fff;text-align: center;line-height: 16px;width: 16px;height: 16px;font-family: arial;font-size: 12px;cursor: pointer;margin: 1px;border: 1px solid #707070;background-color: #060a0b;}.num li.on{line-height: 18px;width: 18px;height: 18px;font-size: 14px;border: 0;background-color: #ce0609;font-weight: bold;}</style><div class="container" id="idcontainer2"><table id="idslider2" border="0" cellpadding="0" cellspacing="0"><tr><td><a href="http://www.cnblogs.com/cloudgamer/archive/2009/03/11/color.html"><img src="/articleimg/2009/09/7031/r_4.jpg"/></a></td><td><a href="http://www.cnblogs.com/cloudgamer/archive/2008/12/24/slider.html"><img src="/articleimg/2009/09/7031/r_3.jpg"/></a></td><td><a href="http://www.cnblogs.com/cloudgamer/archive/2008/12/03/resize.html"><img src="/articleimg/2009/09/7031/r_rt_2.jpg"/></a></td></tr></table><ul class="num" id="idnum"></ul></div><br /><div><input id="idauto" type="button" value="停止" /><input id="idpre" type="button" value="<<" /><input id="idnext" type="button" value=">>" /><select id="idtween"><option value="0">默认缓动</option><option value="1">方式1</option><option value="2">方式2</option></select></div><script>new slidetrans("idcontainer", "idslider", 3).run();///////////////////////////////////////////////////////////var foreach = function(array, callback, thisobject){if(array.foreach){array.foreach(callback, thisobject);}else{for (var i = 0, len = array.length; i < len; i++) { callback.call(thisobject, array[i], i, array); }}}var st = new slidetrans("idcontainer2", "idslider2", 3, { vertical: false });var nums = [];//插入数字for(var i = 0, n = st._count - 1; i <= n;){(nums[i] = $("idnum").appendchild(document.createelement("li"))).innerhtml = ++i;}foreach(nums, function(o, i){o.onmouseover = function(){ o.classname = "on"; st.auto = false; st.run(i); }o.onmouseout = function(){ o.classname = ""; st.auto = true; st.run(); }})//设置按钮样式st.onstart = function(){foreach(nums, function(o, i){ o.classname = st.index == i ? "on" : ""; })}$("idauto").onclick = function(){if(st.auto){st.auto = false; st.stop(); this.value = "自动";}else{st.auto = true; st.run(); this.value = "停止";}}$("idnext").onclick = function(){ st.next(); }$("idpre").onclick = function(){ st.previous(); }$("idtween").onchange = function(){switch (parseint(this.value)){case 2 :st.tween = tween.bounce.easeout; break;case 1 :st.tween = tween.back.easeout; break;default :st.tween = tween.quart.easeout;}}st.run();</script></body></html>
[ctrl+a 全部选择提示：你可先修改部分代码，再按运行]

程序说明

原理就是通过不断设置滑动对象的left(水平切换)和top(垂直切换)来实现图片切换的动态效果。

首先需要一个容器，程序会自动设置容器overflow为hidden，如果不是相对或绝对定位会同时设置position为relative，
滑动对象会设置为绝对定位：

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

如果没有设置change切换参数属性，会自动根据滑动对象获取：

this.change = this.options.change ? this.options.change :
this._slider[bvertical ? "offsetheight" : "offsetwidth"] / this._count;

执行run方法就会开始进入切换，其中有一个可选参数用来重新设置要切换的图片索引：

index == undefined && (index = this.index);
index < 0 && (index = this._count - 1) || index >= this._count && (index = 0);
== undefined && (index = this.index);
index < 0 && (index = this._count - 1) || index >= this._count && (index = 0);

之后就到设置使用 tween缓动时需要的参数了，
包括_target(目标值)、_t(时间)、_b(初始值)和_c(变化量)：

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;

还有duration(持续时间)是自定义属性。

参数设置好后就执行move程序开始移动了。
里面很简单，首先判断_c是否有值（等于0表示不需要移动）和_t是否到达duration，
未满足条件就继续移动，否则直接移动到目标值并进行下一次切换：

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));
}

|||

使用说明

实例化需要3个参数，分别是容器对象，滑动对象和切换数量，之后可以直接执行run方法运行：

new slidetrans("idcontainer", "idslider", 3).run();

还有以下可选属性：

vertical: true,//是否垂直方向（方向不能改）
auto: true,//是否自动
change: 0,//改变量
duration: 50,//滑动持续时间
time: 10,//滑动延时
pause: 2000,//停顿时间(auto为true时有效)
onstart: function(){},//开始转换时执行
onfinish: function(){},//完成转换时执行
tween: tween.quart.easeout//tween算子

其中vertical初始化后就不能修改，tween算子可参照这里的缓动效果选择（实例中选了其中3个）。

还有提供了以下方法：

next: 切换下一个
previous: 切换上一个
stop: 停止自动切换
还有上面说到的run

程序代码：

代码拷贝框
var slidetrans = function(container, slider, count, options) {this._slider = $(slider);this._container = $(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: true,//是否自动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) {//修正indexindex == 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);}};
[ctrl+a 全部选择然后拷贝]

上一篇：JS区别IE6、IE7、IE8之间的方法

下一篇：JS给文本区域(textarea)字数限制