蓝派网(www.lan27.com)-精选网络资源,分享和交流! 文章首页站内搜索在线手册广告代码酷站欣赏万年历
您现在的位置: 蓝派网 >> 文章中心 >> 网页制作 >> JavaScript >> 正文

JavaScript 图片切换展示效果

作者:佚名    文章来源:http://cloudgamer.cnblogs.com/    更新时间:2008-7-6 13:30:54
看到alibaba的一个图片切换效果,感觉不错,想拿来用用。但代码一大堆的,看着昏,还是自己来吧。

由于有了做JavaScript 图片滑动展示效果的经验,做这个就容易得多了。

先看看效果:

根据alibaba做的效果:
  • 1
  • 2
  • 3
alibaba的按钮有一个延迟的功能,应该加个定时器,但这个不是重点就省了吧。

扩展成能左右切换:
  • 1
  • 2
  • 3

其他扩展功能:





切换速度:

停顿时间:


程序说明:
首先需要一个容器,设置它的overflow为hidden,position为relative;
容器里面还要一个滑动对象,设置它的position为
absolute;
initialize()函数里初始化一些属性。

在切换之前先执行Start()函数,进行相关设置,
主要是设置Index属性(索引)和_target属性(目标值):
Code

接着就执行Move()函数开始移动了,原理通过设置滑动对象的top(或left)来做出移动的效果,
而减速的效果就需要执行GetStep()函数来获取步长:
var iStep = (iTarget - iNow) / this.Step;
用目标值减当前值再除以一个参数,得到步长,
这样取得的步长在当前值越接近目标值时会越来越小,也做成了减速的效果,
然后在top(或left)的设置中加上这个步长,并设置定时器继续Move(),直到到达目标值:
Code

下面例子里的容器结构:
Code

要美观的话需要css设置一下:
Code
样式的设置跟程序也有一定关系,例如宽和高,这里就不说明了。

接着就可以实例化了:
Code
这里主要有4个参数,分别是容器对象、滑动对象、切换参数和切换数量。
当程序是上下切换时,切换参数切换的高度,当左右切换时,是切换的宽度。
切换数量就是有多少个切换对象了,例如上面的例子就是3个。
最后的参数是一些设置:
属性: 默认值//说明
Up:   true,//是否向上(否则向左)
Step:  5,//滑动变化率
Time:  10,//滑动延时
Auto:  true,//是否自动转换
Pause:  2000,//停顿时间(Auto为true时有效)
onStart: function(){},//开始转换时执行
onFinish: function(){}//完成转换时执行

例子里设置了onStart属性,作用是在切换开始时,设置按钮的样式

例子里完整的测试代码:
Code

源码:
Code

发表评论】【打印此文】【关闭窗口】【点击数:
★好玩的休闲小游戏★