序一(08/07/06)
看到alibaba的一个图片切换效果,感觉不错,想拿来用用。但代码一大堆的,看着昏,还是自己来吧。
由于有了做图片滑动展示效果的经验,做这个就容易得多了。
序二(09/03/19)
自写了Tween缓动之后就很想重新写过这个效果,近来有点时间,终于可以动手了。
除了改成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);
== 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 图片滑动展示效果
posted @ 2008-07-06 01:25
cloudgamer 阅读(41560)
评论(140) 编辑 收藏 网摘 所属分类:
Javascript
发表评论
#101楼[
楼主]2008-08-27 13:49 |
@aaaaa
我不是写了程序说明了吗
那些就相当于教程了
至于实际用处,我想关键是掌握这里面的一些技巧
那就能做到随心所欲了
#103楼[
楼主]2008-08-28 21:55 |
@想爱就去爱吧
谢谢
在网上找了这么久,就你这个最好用。厉害呀!惭愧啊!
#105楼[
楼主]2008-09-25 20:48 |
@珍仪
谢谢支持
#107楼[
楼主]2008-09-26 23:48 |
#109楼[
楼主]2008-10-05 20:08 |
@mike108mvp
"这里主要有4个参数,分别是容器对象、滑动对象、切换参数和切换数量"
你把切换参数设为5就行
楼主,我看了你的代码,跑了一下,加载时会先同时显示三张图片,然后过一会儿才是图片切换效果,这个问题如何解决呢?
#111楼[
楼主]2008-10-16 14:13 |
@阿超哥
给.container加个position:relative
就好了
现在已经修正
谢谢关注
--引用--------------------------------------------------
cloudgamer: @阿超哥
给.container加个position:relative
就好了
现在已经修正
谢谢关注
--------------------------------------------------------
谢谢啊,正在研究这方面的问题呢。。。
为何我同时更改了container和.slider img高宽后,图片切换没有按更改的尺寸?
会将另一图片显示在上面。
#114楼[
楼主]2008-10-16 15:47 |
@阿超哥
你要根据实际修改这些参数
“这里主要有4个参数,分别是容器对象、滑动对象、切换参数和切换数量。
当程序是上下切换时,切换参数切换的高度,当左右切换时,是切换的宽度。
切换数量就是有多少个切换对象了,例如上面的例子就是3个。”
更改了container和.slider img高宽后切换参数也要修改
#116楼[
楼主]2008-10-20 20:07 |
@天空诚
谢谢支持
#118楼[
楼主]2008-10-22 19:43 |
@池晓东
谢谢支持
#120楼[
楼主]2008-10-29 08:39 |
@波浪谷
谢谢
你好!
我这也有一段图片切换的效果,不过我希望能在鼠标移到图片时切换能停止,移开了又能再切换,希望能帮我看看,谢谢了!
代码如下:
<script language=JavaScript>
<!-- // BannerAD
var bannerAD=new Array();
var bannerADlink=new Array();
var adNum=0;
bannerAD[0]="images/xp001.jpg";
bannerADlink[0]="#";
bannerAD[1]="images/xp002.jpg";
bannerADlink[1]="#";
bannerAD[2]="images/xp003.jpg";
bannerADlink[2]="#";
bannerAD[3]="images/xp004.jpg";
bannerADlink[3]="#";
var preloadedimages=new Array();
for (i=1;i<bannerAD.length;i++){
preloadedimages[i]=new Image();
preloadedimages[i].src=bannerAD[i];
}
function setTransition(){
if (document.all){
bannerADrotator.filters.revealTrans.Transition=Math.floor(Math.random()*23);
bannerADrotator.filters.revealTrans.apply();
}
}
function playTransition(){
if (document.all)
bannerADrotator.filters.revealTrans.play()
}
function nextAd(){
if(adNum<bannerAD.length-1)adNum++ ;
else adNum=0;
setTransition();
document.images.bannerADrotator.src=bannerAD[adNum];
playTransition();
theTimer=setTimeout("nextAd()", 5000);
}
function jump2url(){
jumpUrl=bannerADlink[adNum];
jumpTarget='_blank';
if (jumpUrl != ''){
if (jumpTarget != '')window.open(jumpUrl,jumpTarget);
else location.href=jumpUrl;
}
}
function displayStatusMsg() {
status=bannerADlink[adNum];
document.returnValue = true;
}
//-->
</script>
<IMG
style="FILTER: revealTrans(duration=2,transition=20)" height=300
src="images/qt001.jpg" width=420 border=0
name=bannerADrotator>
<SCRIPT language=JavaScript>nextAd()</SCRIPT>
#122楼[
楼主]2008-11-07 10:37 |
#124楼[
楼主]2008-11-07 11:47 |
@lindy
大概就是onmouseover的时候clearTimeout那个theTimer
onmouseoout的时候再重新nextAd咯
楼主的博客我收藏了,楼主的技术很强大,我会经常来学习的。
if (iStep != 0) {
this._slider.style[style] = (iNow + iStep) + "px";
this._timer = setTimeout(function(){ oThis.Move(); }, this.Time);
}
GetStep: function(iTarget, iNow) {
var iStep = (iTarget - iNow) / this.Step;
if (iStep == 0) return 0;
if (Math.abs(iStep) < 1) return (iStep > 0 ? 1 : -1);
return iStep;
}
这2段代码可以说是整个效果的核心,楼主写的太好了太精简了。
要是楼主能完全脱离protytype框架,用最底层的js写的话我觉得更好,
把initialize()方法的初始化都写到构造函数TransformView()中,
function TransformView(p1,p2,...){this.p1 = p1;.....},这样更有利于
大家学习,毕竟我们新手水平有限,看框架的一些思想还是蛮吃力的。
#127楼[
楼主]2008-11-14 08:41 |
@chenjianwei
其实也没有用框架啊
只是用了它的类写法结构
感觉不错就一直用了
怎么5个不行呢,4个好的,宽458,高168,图片宽458,高138,高人啊??????
#132楼[
楼主]2008-12-18 20:38 |
@仲川
@bengdou
@perfectlove
谢谢支持
@啊啊疯狂
估计是换行了
你设置一下试试
.slider2{width:9000px;}
不好意思呢,忘了设容器了,图片总长度超过容器宽度了,高人,拜读了,会常来!!!!!很高》》》》
#134楼[
楼主]2008-12-18 20:52 |
@啊啊疯狂
呵呵
欢迎欢迎
<body>
<script language="javascript">
var img=nwe Array(4);
var start=null;
var counter=1;
var delaytime=null;
if(document.images)
{
for(i=0;i<=3;i++)
{
img[i]=new Image();
img[i].src="img/H"+i+".jpg";
}
}
function tj(dtime)
{
var temp=parseInt(dtime)
if(temp!=NaN)
delaytime=temp*1000;
else
delaytime=2000;
}
function anim()
{
counter++;
document.images[0]=img[counter].src;
if(counter==3)
counter=0;
}
function start1()
{
tj(document.form1.delay.value);
start=setInterval("anim()",delaytime);
document.form1.show1.disable=true;
document.form1.show2.disable=false;
}
function stop()
{
clearInterval(start);
document.form1.show2.disable=true;
document.form1.show1.disable=false;
}
</script>
<table width="200" border="0" cellspacing="4" cellpadding="1">
<tr>
<td>
<img src="IMG/H1.JPG" WIDTH=140 HIEGHT=140><BR>
<form id="form1" name="form1" >
<FONT COLOR=#000000>请输入时间间隔:</FONT>
<input name="dtime" type="text" id="delay" size="2" /><br />
<input type="button" value="开始显示" name="show1" onClick="start1();" >
<input type="button" value="停止显示" name="show2" onClick="stop();" disabled><br>
</form>
</td>
</tr>
</table>
</body>
老大,给我看下,我搞了一天了,没有解决,我太菜了
#136楼[
楼主]2008-12-19 23:42 |
@张树才
本来想发程序给你但没看到你留邮箱
我说说要修改的地方吧
首先
var img=nwe Array(4);
这里的new写错了
还有是
if(temp!=NaN)
这里记住NaN 不与任何值相等,包括其本身
所以应该这样判断
f(!isNaN(temp))
还有
document.images[0]=img[counter].src;
应该这样
document.images[0].src=img[counter].src;
最后还有这里
img[i]=new Image();
img[i].src="img/H"+i+".jpg";
要改成
(function(i){
img[i]=new Image();
img[i].src="img/H"+i+".jpg";
})(i)
否则图片都是同一张
貌似就是这些
#138楼[
楼主]2008-12-24 09:49 |
@┊平平淡淡┊
哦?你是?
@cloudgamer
呵呵,楼主是把js当面向对象的语言来用了,越来越喜欢来楼主这块地方了.
我主要做业务罗辑的,不过还是给楼主的js技术给吸引住了.
看了两天还没完全看懂,大师的创建函数的方法都是非主流的...
var $ = function (id) {
return "string" == typeof id ? document.getElementById(id) : id;
};
问了好久才知道是
function $ (id) {
if( 'string' == typeof id )
{
return document.getElementById(id);
}
else
{
return id;
}
}
这个意思~
大师以后能不能再写通俗点,这里的新手很多的,我也每天来看的
#143楼[
楼主]2009-02-12 15:55 |
@mania
@Cn_Drinks.L
@cao_love
谢谢支持
@方立
你通过这样也学得更多了
不是更好吗
对里面的例子看了很久了,现在开始仿着自己去做,希望能从LZ的代码里面学到点东西,因为我知道光看光想是学不到的,只有自己动手才能学到
#149楼[
楼主]2009-02-25 08:17 |
@优雅的猪
@@mirror@
谢谢支持
@suitear
你要把样式设置好
.container{width:408px; height:168px; overflow:hidden; position:relative; }
.slider{position:absolute;}
.slider li{ list-style:none;display:inline;}
.slider img{ width:408px; height:168px; display:block;}
怎么给展示的图片添加连接!
还有怎么添加新的图片!就是添加个4!
slider img/.container改变哪个??是代表什么意思!
谢谢了!
#152楼[
楼主]2009-03-02 08:20 |
@suitear
直接在html加图片加链接就行了
之后改切换数量为4
你说的是不是在<ul></ul>加一个<li>4</li>我图片连接也加了..但是他说
对象为null..第4的一个鼠标上没反应
#155楼[
楼主]2009-03-19 08:23 |
@evanflower
谢谢支持
@fasfd
用新的试试吧
大师...看完后,我有三个感觉...
第一种是,大师你很牛!!
第二种是,我一头雾水,很多都看不懂...也肯能是初学的关系,我的水平是属于刚刚看完 javascript权威指南那种...做一些简单的ajax程序...
第三种是,我什么时候才能大师您的一半水平...
麻烦大师推荐一下,我该看什么书才能看懂你的代码...
#158楼[
楼主]2009-03-30 18:49 |
@guolimin1118
@chen3002min
谢谢支持
既然你权威指南这么砖头的书也啃了
那我想你需要的是更多的实践吧
呵呵 加油
p == "relative" || p == "absolute" || (this._container.style.position = "relative");
我想请教下关于 XXX||XXX||XXX 这个语句,
还有下面那个
index == undefined && (index = this.Index);
index < 0 && (index = this._count - 1) || index >= this._count && (index = 0);
能帮忙解释下吗?谢谢
#160楼[
楼主]2009-03-31 20:01 |
<table>
<tr>
<td><!-- #include file="SlideTrans.asp" --></td>
</tr>
</table>
这样调用楼主的文件后,页面显示图片不会切换
但是去掉表格外框像这样直接这样调用就显示正常
<!-- #include file="SlideTrans.asp" -->
能指教一下吗
#162楼[
楼主]2009-04-11 11:30 |
@徐毅
你放个测试我看看
#164楼[
楼主]2009-04-12 00:00 |
楼主:
赎我才浅,我找不到添加图片的地方,麻烦你给予解答,谢谢,狠强大
#167楼[
楼主]2009-04-22 21:16 |
@新鲜的尸体
什么意思》?
@ASP新手
就在html里面咯
#169楼[
楼主]2009-04-23 11:22 |
@awin
公告那里就有
请问下有没有设置可以直接跳回第一页。不然图多了看上去眼花
#171楼[
楼主]2009-04-24 15:32 |
@Teens
你可以自己试试扩展
毕竟我写的不可能符合所有人的需求
楼主,就是你给的那些程序代码
我不会用,我刚刚开始学JS可是看到楼主写的那些代码我就晕了,
好多都是我在书上没有见过的
就是怎么运用楼主给的那些代码啊
#173楼[
楼主]2009-04-25 14:03 |
@ 朱珊
你可以下载实例用用看
SetOptions: function(options) {}
这样写是什么意思啊? 以前都是 function setXXX(options){}
#175楼[
楼主]2009-04-25 17:01 |
@ 朱珊
那是一个对象
{
SetOptions: function(options) {}
}
这样写是什么意思啊? 以前都是 function setXXX(options){}
谁得分时间
#178楼[
楼主]2009-04-28 14:04 |
@活性炭
那是一个对象
{
SetOptions: function(options) {}
}
拜读了很久啊
index < 0 && (index = this._count - 1) || index >= this._count && (index = 0);
为什么要有index<0的判断了? 难道是想做上下动,或左向右动做的设置??
有点问题噢 基本上照着你的写法模仿了一个
但是发现开始的时候 那个有1,2,3的1是没有样式的 很想不通啊
st.Run()以后 在里面就有onStrat() 就应该可以上色拉,刚开始的时候却看不见样式了.
最后有点疑问:照着写的方式,是为了定义按纽的样式吗?比如写成迅雷看看或者土豆首页上的那中效果??
#180楼[
楼主]2009-05-15 16:28 |
@wtcsy
index < 0 && (index = this._count - 1) || index >= this._count && (index = 0);
index小于0就取最大的索引
大于最大的索引就取0
做一个循环而已
至于其他不太明白,或者email个demo给我吧
#184楼[
楼主]2009-05-19 20:11 |
@sky304
@ddda
谢谢支持
#187楼[
楼主]2009-06-23 15:45 |
@284616628
那个是flash
真是谢谢楼主了,今天稍微改了下代码,就先借用了哟。。
非常感谢。。
真是不意思,昨天修改了您的代码,运行了效果还不错。可是我今天换了图片比昨天的要大,然后滚动时不是一张一张的滚动,有时会滚动半张,就不会停留在一整张图片上,宽度高度都设置了,也没什么用。不知道是不是还需要修改那些地方,麻烦指点下。。。
#190楼[
楼主]2009-06-26 13:53 |
@刘姿廷
修改图片大小咯
不行啊,图片是不能改的,div和table的大小,我都修改了。。呜呜。。就是不行啊。请指点。。。
#192楼[
楼主]2009-06-26 22:58 |
@刘姿廷
设img的width和height啊
img的width和height,这个早就设置了,该设置的宽高我设置了。就是不知道咋的?滚动图片不会一张张滚动。请指点。。。
#194楼[
楼主]2009-06-29 14:33 |
@刘姿廷
这样说我也不知道什么问题
最好email一个demo给我
第一张图片显示是OK的,可是一点击上下页时,滚动时,图片就不会一张张显示,滚动一圈回来,再到第一张时,又是可以显示完整。是不是滚动时还需要设置高度呢?
#196楼[
楼主]2009-06-29 14:53 |
@刘姿廷
你把
Change: 0,//改变量
这个值设成每次要滚动的高度看看
嗯嗯.修改了change的值就OK了..真是太谢谢了..周末时间好好研究您的代码..太感谢了..
#198楼[
楼主]2009-06-29 15:03 |
@刘姿廷
谢谢支持
单独使用JS调用没有问题。
放到文件里后发现onmouseover有点儿问题,google提示no mothod 'run'
不知道怎么办。偶发现每次自动run时,onStart这个函数未执行成功。forEach(nums, function(o, i){ o.className = st.Index == i ? "on1" : ""; })....这个funtion内的o,i不知道是怎么回事。st.index的值与i的值是否变动。不太明白。手动转换出问题.还请看看,谢谢
#201楼[
楼主]
2009-07-03 13:51 |
@singones
或者放到window.onload应该就可以