分享

JavaScript 图片切换展示效果 - Web 开发 / JavaScript

 创源世界 2011-04-05
程序说明

原理就是通过不断设置滑动对象的left(水平切换)和top(垂直切换)来实现图片切换的动态效果。

首先需要一个容器,程序会自动设置容器overflow为hidden,如果不是相对或绝对定位会同时设置position为relative,
滑动对象会设置为绝对定位:

Code
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切换参数属性,会自动根据滑动对象获取:

Code
this.Change = this.options.Change ? this.options.Change :
  this._slider[bVertical ? "offsetHeight" : "offsetWidth"] / this._count;
 

执行Run方法就会开始进入切换,其中有一个可选参数用来重新设置要切换的图片索引:

Code
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

#2楼 得分:0回复于:2009-03-19 01:15:45
程序代码

JScript 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); } };
#3楼 得分:0回复于:2009-03-19 08:21:33
顶一下
#4楼 得分:3回复于:2009-03-19 08:28:49
帮顶一下
  • slowhand用户头像
  • slowhand
  • (眼看奔三了,咋还没二够呢)
  • 等 级:
#5楼 得分:3回复于:2009-03-19 08:35:51
感谢分享!
收藏先~
#6楼 得分:3回复于:2009-03-19 08:44:14
呵呵,不错!
  • ccs02287用户头像
  • ccs02287
  • (空心兜兜)
  • 等 级:
  • 7

    4

#7楼 得分:3回复于:2009-03-19 09:07:36
前来学习
#8楼 得分:3回复于:2009-03-19 09:22:52
顶一个,楼主辛苦了,代码下下来,好好拜读一下
#9楼 得分:3回复于:2009-03-19 09:42:47
cloudgamer的东西就是好!
#10楼 得分:3回复于:2009-03-19 09:50:58
出本书吧。。。
  • zliu789用户头像
  • zliu789
  • (好大一条黄瓜。。)
  • 等 级:
#11楼 得分:3回复于:2009-03-19 09:57:04
一分也是分啊。
#12楼 得分:3回复于:2009-03-19 10:06:16
对AJAX有兴趣的朋友,欢迎加入群78514534
对ASP.NET和C#有兴趣的朋友,欢迎加入67226009
#13楼 得分:3回复于:2009-03-19 10:09:01

#14楼 得分:0回复于:2009-03-19 11:08:17
谢谢支持!!
  • pdsnet用户头像
  • pdsnet
  • (忍耐 克己)
  • 等 级:
#15楼 得分:2回复于:2009-03-19 11:14:46
JS 太差了 看你的代码都困难
#16楼 得分:2回复于:2009-03-19 11:21:33
顶一个!!
#17楼 得分:2回复于:2009-03-19 12:22:59
不错 不错!
#18楼 得分:0回复于:2009-03-19 14:06:47
谢谢支持
#19楼 得分:2回复于:2009-03-19 15:03:51
学习了
#20楼 得分:2回复于:2009-03-19 15:19:36
学习了
#21楼 得分:2回复于:2009-03-19 15:35:17
wo下载了,真不错还有美女呢!
#22楼 得分:2回复于:2009-03-20 00:19:14
楼主的全是好东西啊
#23楼 得分:2回复于:2009-03-20 01:48:51
顶```
  • JaggerLee用户头像
  • JaggerLee
  • (在山的那边海的那边有一群程序员)
  • 等 级:
#24楼 得分:2回复于:2009-03-20 09:12:08
效果很不错,速度很快,收藏顶贴
#25楼 得分:2回复于:2009-03-20 10:11:40
楼主的作品不光JavaScript代码漂亮,连mm也很漂亮,收藏了
#26楼 得分:0回复于:2009-03-20 15:03:02
谢谢支持
  • wclszh用户头像
  • wclszh
  • (wclszh)
  • 等 级:
#27楼 得分:2回复于:2009-03-20 15:45:53
这个东西太好了,叮叮叮
  • zzxap用户头像
  • zzxap
  • (枫语wang)
  • 等 级:
  • 2

#28楼 得分:2回复于:2009-03-20 16:03:58
不错嘛接分
#29楼 得分:0回复于:2009-03-21 08:44:25
谢谢支持
#30楼 得分:2回复于:2009-03-21 09:01:42
确实不错
#31楼 得分:2回复于:2009-03-21 11:40:47
谢谢分享
#32楼 得分:2回复于:2009-03-21 12:13:44
嗯 不错
  • xiaofanku用户头像
  • xiaofanku
  • (浮生一梦何处醉)
  • 等 级:
#33楼 得分:2回复于:2009-03-21 12:21:56
引用 32 楼 lihan6415151528 的回复:
嗯 不错

看到了!只能说LZ太棒了
#34楼 得分:2回复于:2009-03-21 21:12:27
js高手 有的我好好读读代码了...
#35楼 得分:0回复于:2009-03-23 08:42:29
谢谢支持
#37楼 得分:2回复于:2009-03-23 08:59:30
帮顶
#38楼 得分:0回复于:2009-03-25 13:50:27
#39楼 得分:2回复于:2009-03-25 15:01:16
js 牛人
羡慕哦
  • LIHY70用户头像
  • LIHY70
  • (今天你做了什么?)
  • 等 级:
#40楼 得分:2回复于:2009-03-25 15:04:45
向LZ学习!
#41楼 得分:2回复于:2009-03-25 16:07:13
好东西
#42楼 得分:2回复于:2009-03-25 16:23:09
收藏!好东西!谢谢楼主分享!
#43楼 得分:2回复于:2009-03-25 21:23:38
楼主 好强大啊
#44楼 得分:2回复于:2009-03-25 22:34:16
什么时候我也可以这样???汗…
#45楼 得分:0回复于:2009-03-26 11:30:48
#46楼 得分:1回复于:2009-03-26 11:31:19
牛人哦
  • cb1156用户头像
  • cb1156
  • (狐狸)
  • 等 级:
#47楼 得分:1回复于:2009-03-26 13:38:36
又来发特效了哇。。
#48楼 得分:1回复于:2009-03-26 18:53:00
up
#49楼 得分:0回复于:2009-03-27 09:20:10
#50楼 得分:1回复于:2009-03-27 10:03:37
真够牛的~!收藏下,然后再学习!
#51楼 得分:1回复于:2009-03-27 10:15:00
HTML code
                        
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www./TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www./1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>www.lanrentuku.com</title> <SCRIPT language=javascript src="js/changimages.js" type="text/javascript"></SCRIPT> <STYLE type=text/css> body{font-size:12px} .pic_show {PADDING-RIGHT: 10px; DISPLAY: inline; PADDING-LEFT: 0px; BACKGROUND: url(images/bg_show.gif) no-repeat right top; FLOAT: left; PADDING-BOTTOM: 12px; MARGIN: 3px 0px 0px 17px; WIDTH: 247px; PADDING-TOP: 8px; HEIGHT: 323px } </STYLE> </head> <BODY><br> <table width="300" height="496" border="0" align="center" cellpadding="0" cellspacing="0"> <tr> <td width="376" height="362" align="center"><div class=pic_show> <div id=imgADPlayer></div> <script type="text/jscript" language="javascript"> PImgPlayer.addItem( "", "http://www.lanrentuku.com/", "images/01.jpg"); PImgPlayer.addItem( "", "http://www.lanrentuku.com/", "images/02.jpg"); PImgPlayer.addItem( "", "http://www.lanrentuku.com/", "images/03.jpg"); PImgPlayer.addItem( "", "http://www.lanrentuku.com/", "images/04.jpg"); PImgPlayer.addItem( "", "http://www.lanrentuku.com/", "images/05.jpg"); PImgPlayer.addItem( "", "http://www.lanrentuku.com/", "images/06.jpg"); PImgPlayer.addItem( "", "http://www.lanrentuku.com/", "images/07.jpg"); PImgPlayer.addItem( "", "http://www.lanrentuku.com/", "images/08.jpg"); PImgPlayer.addItem( "", "http://www.lanrentuku.com/", "images/09.jpg"); PImgPlayer.init( "imgADPlayer", 247, 323 ); </script> </div></td> </tr> <tr> <td height="134" align="center"><p>来源:<a href="http://www./" target="_blank">ZCOM电子杂志</a> </p> <p> 投稿:<a href="http://www./" target="_blank">分享多一点</a>(一 D~ )代码整理:<a href="http://www.lanrentuku.com/" target="_blank">懒人图库</a>  </p> <p>*尊重他人劳动成果,转载请自觉注明出处!</p> <p>注:此代码仅供学习交流,请勿用于商业用途。</p></td> </tr> </table> </BODY></html>

#52楼 得分:1回复于:2009-03-27 10:16:18
JScript code
                        
var PImgPlayer = { _timer : null, _items : [], _container : null, _index : 0, _imgs : [], intervalTime : 3500, //轮播间隔时间 init : function( objID, w, h, time ){ this.intervalTime = time || this.intervalTime; this._container = document.getElementById( objID ); this._container.style.display = "block"; this._container.style.width = w + "px"; this._container.style.height = h + "px"; this._container.style.position = "relative"; this._container.style.overflow = "hidden"; //this._container.style.border = "1px solid #fff"; var linkStyle = "display: block; TEXT-DECORATION: none;"; if( document.all ){ linkStyle += "FILTER:"; linkStyle += "progid:DXImageTransform.Microsoft.Barn(duration=0.5, motion='out', orientation='vertical') "; linkStyle += "progid:DXImageTransform.Microsoft.Barn ( duration=0.5,motion='out',orientation='horizontal') "; linkStyle += "progid:DXImageTransform.Microsoft.Blinds ( duration=0.5,bands=10,Direction='down' )"; linkStyle += "progid:DXImageTransform.Microsoft.CheckerBoard()"; linkStyle += "progid:DXImageTransform.Microsoft.Fade(duration=0.5,overlap=0)"; linkStyle += "progid:DXImageTransform.Microsoft.GradientWipe ( duration=1,gradientSize=1.0,motion='reverse' )"; linkStyle += "progid:DXImageTransform.Microsoft.Inset ()"; linkStyle += "progid:DXImageTransform.Microsoft.Iris ( duration=1,irisStyle=PLUS,motion=out )"; linkStyle += "progid:DXImageTransform.Microsoft.Iris ( duration=1,irisStyle=PLUS,motion=in )"; linkStyle += "progid:DXImageTransform.Microsoft.Iris ( duration=1,irisStyle=DIAMOND,motion=in )"; linkStyle += "progid:DXImageTransform.Microsoft.Iris ( duration=1,irisStyle=SQUARE,motion=in )"; linkStyle += "progid:DXImageTransform.Microsoft.Iris ( duration=0.5,irisStyle=STAR,motion=in )"; linkStyle += "progid:DXImageTransform.Microsoft.RadialWipe ( duration=0.5,wipeStyle=CLOCK )"; linkStyle += "progid:DXImageTransform.Microsoft.RadialWipe ( duration=0.5,wipeStyle=WEDGE )"; linkStyle += "progid:DXImageTransform.Microsoft.RandomBars ( duration=0.5,orientation=horizontal )"; linkStyle += "progid:DXImageTransform.Microsoft.RandomBars ( duration=0.5,orientation=vertical )"; linkStyle += "progid:DXImageTransform.Microsoft.RandomDissolve ()"; linkStyle += "progid:DXImageTransform.Microsoft.Spiral ( duration=0.5,gridSizeX=16,gridSizeY=16 )"; linkStyle += "progid:DXImageTransform.Microsoft.Stretch ( duration=0.5,stretchStyle=PUSH )"; linkStyle += "progid:DXImageTransform.Microsoft.Strips ( duration=0.5,motion=rightdown )"; linkStyle += "progid:DXImageTransform.Microsoft.Wheel ( duration=0.5,spokes=8 )"; linkStyle += "progid:DXImageTransform.Microsoft.Zigzag ( duration=0.5,gridSizeX=4,gridSizeY=40 ); width: 100%; height: 100%"; } // var ulStyle = "margin:0;width:"+w+"px;position:absolute;z-index:999;right:5px;FILTER:Alpha(Opacity=50,FinishOpacity=50, Style=1);overflow: hidden;bottom:-1px;height:16px; border-right:1px solid #fff;"; // var liStyle = "margin:0;list-style-type: none; margin:0;padding:0; float:right;"; // var baseSpacStyle = "clear:both; display:block; width:23px;line-height:18px; font-size:12px; FONT-FAMILY:'宋体';opacity: 0.6;"; baseSpacStyle += "border:1px solid #fff;border-right:0;border-bottom:0;"; baseSpacStyle += "color:#fff;text-align:center; cursor:pointer; "; // var ulHTML = ""; for(var i = this._items.length -1; i >= 0; i--){ var spanStyle = ""; if( i==this._index ){ spanStyle = baseSpacStyle + "background:#ff0000;"; } else { spanStyle = baseSpacStyle + "background:#000;"; } ulHTML += "<li style=\""+liStyle+"\">"; ulHTML += "<span onmouseover=\"PImgPlayer.mouseOver(this);\" onmouseout=\"PImgPlayer.mouseOut(this);\" style=\""+spanStyle+"\" onclick=\"PImgPlayer.play("+i+");return false;\" herf=\"javascript:;\" title=\"" + this._items[i].title + "\">" + (i+1) + "</span>"; ulHTML += "</li>"; } // var html = "<a href=\""+this._items[this._index].link+"\" title=\""+this._items[this._index].title+"\" target=\"_blank\" style=\""+linkStyle+"\"></a><ul style=\""+ulStyle+"\">"+ulHTML+"</ul>"; this._container.innerHTML = html; var link = this._container.getElementsByTagName("A")[0]; link.style.width = w + "px"; link.style.height = h + "px"; link.style.background = 'url(' + this._items[0].img + ') no-repeat center center'; // this._timer = setInterval( "PImgPlayer.play()", this.intervalTime ); }, addItem : function( _title, _link, _imgURL ){ this._items.push ( {title:_title, link:_link, img:_imgURL } ); var img = new Image(); img.src = _imgURL; this._imgs.push( img ); }, play : function( index ){ if( index!=null ){ this._index = index; clearInterval( this._timer ); this._timer = setInterval( "PImgPlayer.play()", this.intervalTime ); } else { this._index = this._index<this._items.length-1 ? this._index+1 : 0; } var link = this._container.getElementsByTagName("A")[0]; if(link.filters){ var ren = Math.floor(Math.random()*(link.filters.length)); link.filters[ren].Apply(); link.filters[ren].play(); }
#53楼 得分:1回复于:2009-03-27 10:16:44
JScript code
                        
link.href = this._items[this._index].link; link.title = this._items[this._index].title; link.style.background = 'url(' + this._items[this._index].img + ') no-repeat center center'; // var liStyle = "margin:0;list-style-type: none; margin:0;padding:0; float:right;"; var baseSpacStyle = "clear:both; display:block; width:23px;line-height:18px; font-size:12px; FONT-FAMILY:'宋体'; opacity: 0.6;"; baseSpacStyle += "border:1px solid #fff;border-right:0;border-bottom:0;"; baseSpacStyle += "color:#fff;text-align:center; cursor:pointer; "; var ulHTML = ""; for(var i = this._items.length -1; i >= 0; i--){ var spanStyle = ""; if( i==this._index ){ spanStyle = baseSpacStyle + "background:#ff0000;"; } else { spanStyle = baseSpacStyle + "background:#000;"; } ulHTML += "<li style=\""+liStyle+"\">"; ulHTML += "<span onmouseover=\"PImgPlayer.mouseOver(this);\" onmouseout=\"PImgPlayer.mouseOut(this);\" style=\""+spanStyle+"\" onclick=\"PImgPlayer.play("+i+");return false;\" herf=\"javascript:;\" title=\"" + this._items[i].title + "\">" + (i+1) + "</span>"; ulHTML += "</li>"; } this._container.getElementsByTagName("UL")[0].innerHTML = ulHTML; }, mouseOver : function(obj){ var i = parseInt( obj.innerHTML ); if( this._index!=i-1){ obj.style.color = "#ff0000"; } }, mouseOut : function(obj){ obj.style.color = "#fff"; } }
#54楼 得分:0回复于:2009-03-28 11:41:24
#55楼 得分:1回复于:2009-03-28 11:45:18
来晚了
#56楼 得分:1回复于:2009-03-30 11:28:46
学习啦
#57楼 得分:1回复于:2009-03-30 11:47:49
学习学习~
  • qiubi用户头像
  • qiubi
  • (古迪)
  • 等 级:
#58楼 得分:1回复于:2009-03-30 11:52:44
好家伙
#59楼 得分:1回复于:2009-03-30 11:55:20
  • yhjhoo用户头像
  • yhjhoo
  • (王子)
  • 等 级:
#60楼 得分:1回复于:2009-03-30 11:57:38
感谢楼主啊
#61楼 得分:1回复于:2009-03-30 12:11:11
回头研究!
  • xxc3303用户头像
  • xxc3303
  • (超级奶崽)
  • 等 级:
#62楼 得分:1回复于:2009-03-30 12:16:07
楼主大大啊
#63楼 得分:1回复于:2009-03-30 13:08:56
收藏了。好东西啊
  • net205用户头像
  • net205
  • (人不可以无耻到这种地步)
  • 等 级:
#64楼 得分:1回复于:2009-03-30 13:11:29
学习......
#65楼 得分:1回复于:2009-03-30 13:11:50
...路过
#66楼 得分:1回复于:2009-03-30 13:25:29
谢谢,学习了,收藏
#67楼 得分:1回复于:2009-03-30 13:29:47
好帖,学习了!顶上去~
  • Arc365用户头像
  • Arc365
  • (小哥)
  • 等 级:
#68楼 得分:1回复于:2009-03-30 13:31:28
收藏了,真是不错的效果
#69楼 得分:1回复于:2009-03-30 13:45:27
不错 不错!
  • beckfun用户头像
  • beckfun
  • (时间是检验真理的唯一标准)
  • 等 级:
#70楼 得分:1回复于:2009-03-30 13:47:27
收藏先
#71楼 得分:1回复于:2009-03-30 14:17:10
mark
#72楼 得分:1回复于:2009-03-30 14:42:23
mark
#73楼 得分:1回复于:2009-03-30 15:05:07
这么好的东西,一定要好好读
#74楼 得分:1回复于:2009-03-30 15:55:22
学习一下
#75楼 得分:1回复于:2009-03-30 16:41:43
up
  • HowardBi用户头像
  • HowardBi
  • (淡淡三月天)
  • 等 级:
#76楼 得分:1回复于:2009-03-30 16:47:06
好东西大家分享,谢谢楼主
  • XIAO_G用户头像
  • XIAO_G
  • (XIAO_G)
  • 等 级:
#77楼 得分:1回复于:2009-03-30 16:48:59
支持一下!!!
#78楼 得分:1回复于:2009-03-30 16:53:54
好东西,看了就激动,怎能不顶!
#79楼 得分:1回复于:2009-03-30 17:00:25
打算一会儿就试验一下 正好可以放到毕业设计里 不错 呵呵
#80楼 得分:1回复于:2009-03-30 17:10:59
精神可嘉,顶起`
#81楼 得分:1回复于:2009-03-30 17:13:10
不错,值得学习
#82楼 得分:1回复于:2009-03-30 17:15:38
#83楼 得分:1回复于:2009-03-30 17:17:34
学习
#84楼 得分:1回复于:2009-03-30 17:38:48
学习
  • nuero用户头像
  • nuero
  • (我的坚持)
  • 等 级:
#85楼 得分:1回复于:2009-03-30 17:49:44
就喜欢顶牛人的贴
#86楼 得分:1回复于:2009-03-30 18:17:28
再次路过。。。。
#87楼 得分:1回复于:2009-03-30 18:49:53
dsfdsfds
#88楼 得分:1回复于:2009-03-30 20:29:50
不错~~技术好高
#89楼 得分:1回复于:2009-03-30 21:31:56
赞!学习了。。
#90楼 得分:1回复于:2009-03-30 21:43:59
高手
#91楼 得分:1回复于:2009-03-30 22:01:37
虽然现在还看不懂,收藏先
#92楼 得分:1回复于:2009-03-30 22:17:36
不错,收藏学习了
  • qiweihero用户头像
  • qiweihero
  • (不要只看到我我优点、)
  • 等 级:
#93楼 得分:1回复于:2009-03-30 22:48:23
JAVASCRIPT不错哦
#94楼 得分:1回复于:2009-03-30 23:59:29
mark
#95楼 得分:1回复于:2009-03-31 08:19:51
TRFHTJHTY
#96楼 得分:1回复于:2009-03-31 08:54:59
不错
#97楼 得分:1回复于:2009-03-31 08:56:30
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);
  }
};



挺不错的啊!
#98楼 得分:1回复于:2009-03-31 09:46:51
收藏了.谢谢LZ
#99楼 得分:1回复于:2009-03-31 10:00:10
好东西啊,收了
#100楼 得分:1回复于:2009-03-31 10:00:49
很不错呢

    本站是提供个人知识管理的网络存储空间,所有内容均由用户发布,不代表本站观点。请注意甄别内容中的联系方式、诱导购买等信息,谨防诈骗。如发现有害或侵权内容,请点击一键举报。
    转藏 分享 献花(0

    0条评论

    发表

    请遵守用户 评论公约