序一(08/07/06)

看到alibaba的一个图片切换效果,感觉不错,想拿来用用。但代码一大堆的,看着昏,还是自己来吧。
由于有了做图片滑动展示效果的经验,做这个就容易得多了。

序二(09/03/19)

自写了Tween缓动之后就很想重新写过这个效果,近来有点时间,终于可以动手了。
除了改成Tween缓动,也改进了程序算法,不过原理还是一样的。

效果预览

仿淘宝/alibaba图片切换:

默认缓动方式1方式2

程序说明

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

Code
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,
未满足条件就继续移动,否则直接移动到目标值并进行下一次切换:

Code
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

程序代码

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

下载测试代码

其他图片展示效果:
JavaScript 图片变换效果(ie only)
JavaScript 图片滑动展示效果

转载于:https://www.cnblogs.com/cloudgamer/archive/2008/07/06/SlideTrans.html

JavaScript 图片滑动切换效果相关推荐

  1. JavaScript html 图片滑动切换效果,幻灯片式切换,新闻展示,滚动新闻

    新闻展示,滚动新闻 程序说明 原理就是通过不断设置滑动对象的left(水平切换)和top(垂直切换)来实现图片切换的动态效果. 首先需要一个容器,程序会自动设置容器overflow为hidden,如果 ...

  2. JavaScript 图片滑动展示效果javascript

    javascript 图片滑动展示效果 更新版本:slideview 图片滑动(扩展/收缩)展示效果 看到jquery实例:图片展示效果后,我也想拿来试试,但我不太喜欢用框架,所以自己做了个. 其中的 ...

  3. 手机端图片滑动切换效果

    最近公司要求开发wap版本页面,碰到了个图片滑动切换效果,折腾了半天,自己封装了一个比较通用的小控件,在此分享一下. 大概功能:可以自定义是否自动切换,支持单手滑动图片进行切换,支持左右滑动切换.循环 ...

  4. dw在php图片滑动切换效果,超简单的图片左右切换滑动

    网上看过很多图片左右切换滑动的效果,不过大都是使用插件实现.插件虽方便,但是对于新手的学习并不是最好的.本文使用jquery这个由原生的JavaScript封装的库,用最简短的代码实现此功能 效果预览 ...

  5. 淘宝首页 图片滑动切换效果 基于CSS3的transition方法实现

    与上一文章对比着看效果更佳 <!doctype html> <html> <head> <meta charset="utf-8"> ...

  6. 淘宝首页 图片滑动切换效果 基于jQuery的animate方法实现

    内容如题 <!doctype html> <html> <head> <meta charset="utf-8"> <styl ...

  7. 移动端和PC端都兼容的图片滑动切换展示效果—PhotoSwipe

    介绍一款兼容移动端和PC端的图片滑动切换展示效果-PhotoSwipe,PhotoSwipe是一款可以在移动触控设备上和PC桌面上完美运行的免费开源的图像展示l类独立的Javascript库,它基于H ...

  8. 怎么在ppt上设置文字滑动的效果html,PPT 中如何设置图片滚动切换效果

    我们经常在工作中使用PPT办公软件,在网页上也经常看到一组图片水平滚动或者垂直滚动的效果,你知道PPT 中如何设置图片滚动切换效果吗?今天小编就教一下大家使用PPT 中如何设置图片滚动切换效果. 首先 ...

  9. [JS]图片自动切换效果(学习笔记)

    上次在下载的网页中看到 javascript实现图片自动切换效果: <style text="text/css"> /*图片滚动栏*/ .container, .con ...

最新文章

  1. Cmake 实例学习 一
  2. 一个新手对linux的认识
  3. 翻译连载 | 第 10 章:异步的函数式(下)-《JavaScript轻量级函数式编程》 |《你不知道的JS》姊妹篇...
  4. html input标签 alt和title 比较
  5. 问题集锦(52-53)
  6. 把struts2的struts.xml配置文件分解成多个配置文件
  7. Deactivate .NET refector
  8. Linux下Bash入门学习笔记
  9. seata xid是什么_阿里开源的分布式事务框架 Seata
  10. 流程图和布局套件模板
  11. Netty工作笔记0045---Netty模型梳理
  12. 2020-09-10 保证软件开发过程遵循ISO 26262标准的十个主要进阶步骤
  13. Guava库学习:学习Guava Cache(二)Guava caches(2)
  14. 【C语言】百行代码实现—俄罗斯方块
  15. wifi工具iw常用操作
  16. 计算机网络16进制地址,计算机内存地址和为什么用16进制?
  17. 数学建模常用模型04 :灰色关联分析法
  18. oracle的shell命令,shell脚本执行oracle insert语句seraph
  19. 资源共享——FTP服务
  20. 携程景区爬取 + 保存Excel

热门文章

  1. psql: FATAL: role “appleyuchi” does not exist与修改默认密码
  2. ubuntu19.10安装deepin的微信和qq(转载+自己在新系统上验证)
  3. dataframe两列相乘构造新特征
  4. java.lang.NoClassDefFoundError: scala/xml/MetaData
  5. OpenGL uniform变量赋值的三种方法
  6. 《机器学习》 周志华学习笔记第一章 绪论(课后习题)
  7. C/C++编程心得(三)
  8. Tomcat配置优化
  9. 基于UDP的组播网络程序
  10. 用Syslog 记录UNIX和Windows日志的方法