程序说明 原理就是通过不断设置滑动对象的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
|
|
|
#5楼 得分:3回复于:2009-03-19 08:35:51
|
|
|
#6楼 得分:3回复于:2009-03-19 08:44:14
|
|
|
#7楼 得分:3回复于:2009-03-19 09:07:36
|
|
|
#8楼 得分:3回复于:2009-03-19 09:22:52
|
|
|
#9楼 得分:3回复于:2009-03-19 09:42:47
|
|
|
#10楼 得分:3回复于:2009-03-19 09:50:58
|
|
|
#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
|
|
|
#15楼 得分:2回复于:2009-03-19 11:14:46
|
|
|
#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
|
|
|
#22楼 得分:2回复于:2009-03-20 00:19:14
 楼主的全是好东西啊
|
|
|
|
|
#23楼 得分:2回复于:2009-03-20 01:48:51
|
|
|
#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
|
|
|
#27楼 得分:2回复于:2009-03-20 15:45:53
|
|
|
#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
|
|
|
#33楼 得分:2回复于:2009-03-21 12:21:56
看到了!只能说LZ太棒了
|
|
|
|
|
#34楼 得分:2回复于:2009-03-21 21:12:27
|
|
|
#35楼 得分:0回复于:2009-03-23 08:42:29
谢谢支持 
|
|
|
|
|
#36楼 得分:0回复于:2009-03-23 08:45:35
|
该回复于2009-03-25 10:48:46被管理员删除
|
|
|
|
#37楼 得分:2回复于:2009-03-23 08:59:30
|
|
|
#38楼 得分:0回复于:2009-03-25 13:50:27
|
|
|
#39楼 得分:2回复于:2009-03-25 15:01:16
|
|
|
#40楼 得分:2回复于:2009-03-25 15:04:45
|
|
|
#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
|
|
|
#47楼 得分:1回复于:2009-03-26 13:38:36
|
|
|
#48楼 得分:1回复于:2009-03-26 18:53:00
|
|
|
#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
|
|
|
#58楼 得分:1回复于:2009-03-30 11:52:44
|
|
|
#59楼 得分:1回复于:2009-03-30 11:55:20
|
|
|
#60楼 得分:1回复于:2009-03-30 11:57:38
|
|
|
#61楼 得分:1回复于:2009-03-30 12:11:11
|
|
|
#62楼 得分:1回复于:2009-03-30 12:16:07
|
|
|
#63楼 得分:1回复于:2009-03-30 13:08:56
|
|
|
#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
|
|
|
#68楼 得分:1回复于:2009-03-30 13:31:28
|
|
|
#69楼 得分:1回复于:2009-03-30 13:45:27
|
|
|
#70楼 得分:1回复于:2009-03-30 13:47:27
收藏先 
|
|
|
|
|
#71楼 得分:1回复于:2009-03-30 14:17:10
|
|
|
#72楼 得分:1回复于:2009-03-30 14:42:23
|
|
|
#73楼 得分:1回复于:2009-03-30 15:05:07
|
|
|
#74楼 得分:1回复于:2009-03-30 15:55:22
|
|
|
#75楼 得分:1回复于:2009-03-30 16:41:43
|
|
|
#76楼 得分:1回复于:2009-03-30 16:47:06
|
|
|
#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
|
|
|
#85楼 得分:1回复于:2009-03-30 17:49:44
|
|
|
#86楼 得分:1回复于:2009-03-30 18:17:28
 再次路过。。。。
|
|
|
|
|
#87楼 得分:1回复于:2009-03-30 18:49:53
|
|
|
#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
|
|
|
#93楼 得分:1回复于:2009-03-30 22:48:23
|
|
|
#94楼 得分:1回复于:2009-03-30 23:59:29
|
|
|
#95楼 得分:1回复于:2009-03-31 08:19:51
|
|
|
#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
|
|
|
#99楼 得分:1回复于:2009-03-31 10:00:10
|
|
|
#100楼 得分:1回复于:2009-03-31 10:00:49
|
|