JavaScript 图片滑动切换效果 - 网页制作

　JavaScript 图片滑动切换效果

作者：cloudgamer　时间： 2009-09-25　文档类型：原创　来自：蓝色理想

第 1 页 JavaScript 图片滑动切换效果 [1]
第 2 页 JavaScript 图片滑动切换效果 [2]

序一（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) { //修正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); } }; </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));
}

出处：蓝色理想
责任编辑：bluehearts

上一页下一页 JavaScript 图片滑动切换效果 [2]

◎进入论坛网页制作、WEB标准化版块参加讨论，我还想发表评论。

相关文章

更多相关链接

javascript的缓动效果

JavaScript Table行定位效果

再谈动态添加样式规则

Javascript函数类型判断解决方案

认识Javascript数组

作者文章

更多作者文章

JavaScript Table行定位效果

JavaScript 浮动定位提示效果

JavaScript 颜色梯度和渐变效果

JavaScript Tween算法及缓动效果

仿Apple滑动条(拖动)产品展示效果


关键字搜索	常规搜索	推荐文档
热门搜索：CSS Fireworks 设计比赛网页制作 web标准用户体验 UE photoshop Dreamweaver Studio8 Flash 手绘 CG

站点最新

站点最新列表

周大福“敬•自然”设计大赛开启

国际体验设计大会7月将在京举行

中国国防科技信息中心标志征集

云计算如何让安全问题可控

云计算是多数企业唯一拥抱互联网的机会

阿里行云

云手机年终巨献，送礼标配299起

阿里巴巴CTO王坚的"云和互联网观"

1499元买真八核云OS双蛋大促

首届COCO桌面手机主题设计大赛

栏目最新

栏目最新列表

浅谈JavaScript编程语言的编码规范

如何在illustrator中绘制台历

Ps简单绘制一个可爱的铅笔图标

数据同步算法研究

用ps作简单的作品展示页面

CSS定位机制之一:普通流

25个最佳最闪亮的Eclipse开发项目

Illustrator中制作针线缝制文字效果

Photoshop制作印刷凹凸字体

VS2010中创建自定义SQL Rule