请选择 进入手机版 | 继续访问电脑版
phpchina phpchina

经典论坛

 找回密码
 注册

QQ登录

只需一步,快速开始

蓝色理想 最新研发动态 新增登录提醒插件 - 用至我的站点 地图任务一定要做 - 给官方提建议

论坛活动及任务 地图和邮件任务 请多用悬赏提问 热夏来袭,选一款蓝色理想的个性T恤吧!

MIUI手机主题设计大赛,奔驰大奖等你拿! 想加薪?!蓝色理想招聘提供你更多机会 悬赏答疑,赚取积分兑奖品!

查看: 29920|回复: 19

JavaScript 图片滑动切换效果 [复制链接]

cloudgamer 楼主

天空里的一片云

荣誉管理 手机认证 

帖子
4223
体力
15689
威望
15
居住地
广东省 佛山市
发表于 2009-3-19 01:20:02 |显示全部楼层
自写了Tween缓动之后就很想重新写过这个效果,近来有点时间,终于可以动手了。
除了改成Tween缓动,也改进了程序算法,不过原理还是一样的。

效果预览

 提示:您可以先修改部分代码再运行



这里有完整的详细说明和实例

完整实例下载

[ 本帖最后由 cloudgamer 于 2009-6-23 21:06 编辑 ]
cloudgamer 楼主

天空里的一片云

荣誉管理 手机认证 

帖子
4223
体力
15689
威望
15
居住地
广东省 佛山市
发表于 2009-3-19 01:22:19 |显示全部楼层

JavaScript,图片,滑动,切换,图片切换,slide,变换,展示,Tween,缓动

程序说明

原理就是通过不断设置滑动对象的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);

之后就到设置使用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
cloudgamer 楼主

天空里的一片云

荣誉管理 手机认证 

帖子
4223
体力
15689
威望
15
居住地
广东省 佛山市
发表于 2009-3-19 01:23:10 |显示全部楼层

JavaScript,图片,滑动,切换,图片切换,slide,变换,展示,Tween,缓动

程序代码

  1. var SlideTrans = function(container, slider, count, options) {
  2.         this._slider = $(slider);
  3.         this._container = $(container);//容器对象
  4.         this._timer = null;//定时器
  5.         this._count = Math.abs(count);//切换数量
  6.         this._target = 0;//目标值
  7.         this._t = this._b = this._c = 0;//tween参数
  8.        
  9.         this.Index = 0;//当前索引
  10.        
  11.         this.SetOptions(options);
  12.        
  13.         this.Auto = !!this.options.Auto;
  14.         this.Duration = Math.abs(this.options.Duration);
  15.         this.Time = Math.abs(this.options.Time);
  16.         this.Pause = Math.abs(this.options.Pause);
  17.         this.Tween = this.options.Tween;
  18.         this.onStart = this.options.onStart;
  19.         this.onFinish = this.options.onFinish;
  20.        
  21.         var bVertical = !!this.options.Vertical;
  22.         this._css = bVertical ? "top" : "left";//方向
  23.        
  24.         //样式设置
  25.         var p = CurrentStyle(this._container).position;
  26.         p == "relative" || p == "absolute" || (this._container.style.position = "relative");
  27.         this._container.style.overflow = "hidden";
  28.         this._slider.style.position = "absolute";
  29.        
  30.         this.Change = this.options.Change ? this.options.Change :
  31.                 this._slider[bVertical ? "offsetHeight" : "offsetWidth"] / this._count;
  32. };
  33. SlideTrans.prototype = {
  34.   //设置默认属性
  35.   SetOptions: function(options) {
  36.         this.options = {//默认值
  37.                 Vertical:        true,//是否垂直方向(方向不能改)
  38.                 Auto:                true,//是否自动
  39.                 Change:                0,//改变量
  40.                 Duration:        50,//滑动持续时间
  41.                 Time:                10,//滑动延时
  42.                 Pause:                2000,//停顿时间(Auto为true时有效)
  43.                 onStart:        function(){},//开始转换时执行
  44.                 onFinish:        function(){},//完成转换时执行
  45.                 Tween:                Tween.Quart.easeOut//tween算子
  46.         };
  47.         Extend(this.options, options || {});
  48.   },
  49.   //开始切换
  50.   Run: function(index) {
  51.         //修正index
  52.         index == undefined && (index = this.Index);
  53.         index < 0 && (index = this._count - 1) || index >= this._count && (index = 0);
  54.         //设置参数
  55.         this._target = -Math.abs(this.Change) * (this.Index = index);
  56.         this._t = 0;
  57.         this._b = parseInt(CurrentStyle(this._slider)[this.options.Vertical ? "top" : "left"]);
  58.         this._c = this._target - this._b;
  59.        
  60.         this.onStart();
  61.         this.Move();
  62.   },
  63.   //移动
  64.   Move: function() {
  65.         clearTimeout(this._timer);
  66.         //未到达目标继续移动否则进行下一次滑动
  67.         if (this._c && this._t < this.Duration) {
  68.                 this.MoveTo(Math.round(this.Tween(this._t++, this._b, this._c, this.Duration)));
  69.                 this._timer = setTimeout(Bind(this, this.Move), this.Time);
  70.         }else{
  71.                 this.MoveTo(this._target);
  72.                 this.Auto && (this._timer = setTimeout(Bind(this, this.Next), this.Pause));
  73.         }
  74.   },
  75.   //移动到
  76.   MoveTo: function(i) {
  77.         this._slider.style[this._css] = i + "px";
  78.   },
  79.   //下一个
  80.   Next: function() {
  81.         this.Run(++this.Index);
  82.   },
  83.   //上一个
  84.   Previous: function() {
  85.         this.Run(--this.Index);
  86.   },
  87.   //停止
  88.   Stop: function() {
  89.         clearTimeout(this._timer); this.MoveTo(this._target);
  90.   }
  91. };
复制代码
njit 
帖子
218
体力
665
威望
0
居住地
江苏省 南京市
发表于 2009-3-19 06:22:30 |显示全部楼层
不错.
最好带上图片说明,比如"这个小姐的三围等等"
cloudgamer 楼主

天空里的一片云

荣誉管理 手机认证 

帖子
4223
体力
15689
威望
15
居住地
广东省 佛山市
发表于 2009-3-19 08:25:36 |显示全部楼层
这些都可以自己扩展的
june17 
帖子
119
体力
172
威望
0
居住地
浙江省 舟山市
发表于 2009-3-19 08:26:40 |显示全部楼层
楼主的博客人气好旺
GMX602 
帖子
196
体力
895
威望
0
居住地
广东省 深圳市
发表于 2009-3-19 08:34:41 |显示全部楼层
楼主强人,学习中...
帖子
32
体力
78
威望
0
发表于 2009-3-19 08:50:31 |显示全部楼层
谢谢分享
xiangjiaojietou.net
cloudgamer 楼主

天空里的一片云

荣誉管理 手机认证 

帖子
4223
体力
15689
威望
15
居住地
广东省 佛山市
发表于 2009-3-19 14:36:21 |显示全部楼层
谢谢支持
cloudgamer 楼主

天空里的一片云

荣誉管理 手机认证 

帖子
4223
体力
15689
威望
15
居住地
广东省 佛山市
发表于 2009-3-20 13:53:51 |显示全部楼层
顶一下
帖子
5
体力
29
威望
0
居住地
福建省 福州市
发表于 2010-1-5 09:46:04 |显示全部楼层
过了这么久不知道还有人回答没。本人刚毕业小菜鸟。
楼主如果我增加图片的数量在
<div class="container" id="idContainer2">
        <table id="idSlider2" border="0" cellpadding="0" cellspacing="0">
                <tr>
                        <td><a href="11.html"><img src="yq/czy/DZJ3.jpg"/></a></td>
                        <td><a href="11.html"><img src="yq/szy/AL322-1.jpg"/></a></td>
                        <td><a href="11.html"><img src="yq/qzy/BTS802.jpg"/></a></td>
                        <td><a href="11.html"><img src="yq/jwy/djd2-c.jpg"></a></td>
                </tr>
        </table>
        <ul class="num" id="idNum">
        </ul>
</div>
这添加了一个TD那我应该在哪个参数里面进行修改才能让它切换
帖子
5
体力
29
威望
0
居住地
福建省 福州市
发表于 2010-1-5 09:56:44 |显示全部楼层
额,是我自己错了……想改成一份图片结果就走样了。
帖子
871
体力
2942
威望
1
居住地
重庆市 渝北区
发表于 2010-1-5 10:00:54 |显示全部楼层
收藏了,谢谢楼主!
成长中...
帖子
5
体力
29
威望
0
居住地
福建省 福州市
发表于 2010-1-5 10:07:49 |显示全部楼层

 提示:您可以先修改部分代码再运行

怎么能不让他往上跑

[ 本帖最后由 cloudgamer 于 2010-1-6 09:20 编辑 ]
onway 
帖子
2
体力
42
威望
0
发表于 2010-1-5 12:20:01 |显示全部楼层
学习一下...
帖子
145
体力
647
威望
0
居住地
福建省 厦门市
发表于 2010-1-5 12:49:39 |显示全部楼层
呵呵,版主不是盖得,厉害
帖子
5
体力
29
威望
0
居住地
福建省 福州市
发表于 2010-1-5 14:30:07 |显示全部楼层
楼主我修改了下结果

 提示:您可以先修改部分代码再运行


那现在里面的哪个代码参数要改才能变好
cloudgamer 楼主

天空里的一片云

荣誉管理 手机认证 

帖子
4223
体力
15689
威望
15
居住地
广东省 佛山市
发表于 2010-1-6 09:23:30 |显示全部楼层

回复 17# cx2828948 的帖子


乱来的啊
把第一个
new SlideTrans("idContainer2", "idSlider2", 4).Run();
去掉
帖子
5
体力
29
威望
0
居住地
福建省 福州市
发表于 2010-1-6 14:31:20 |显示全部楼层
我试过了不行纳
cloudgamer 楼主

天空里的一片云

荣誉管理 手机认证 

帖子
4223
体力
15689
威望
15
居住地
广东省 佛山市
发表于 2010-1-7 15:50:10 |显示全部楼层

回复 19# cx2828948 的帖子

你用我的改
不要用你自己的
您需要登录后才可以回帖 登录 | 注册


Archiver|手机版|blueidea.com ( 京ICP备05002321号 )    

GMT+8, 2012-6-15 04:07 , Processed in 0.158369 second(s), 8 queries , Gzip On, Memcache On.

Powered by Discuz! X2

© 2001-2011 Comsenz Inc.

回顶部