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)字數限制