警用辣椒水哪里买:JavaScript 图片切换展示效果 - Web 开发 / JavaScript

来源：百度文库编辑：九乡新闻网时间：2024/05/06 02:11: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

对我有用[0]
丢个板砖[0]
引用
举报
管理
TOP

精华推荐：Ajax学习资料集锦！

cloudgamer
(追)
等　级：

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

对我有用[0]
丢个板砖[0]
引用
举报
管理
TOP

精华推荐：javascript魔力的经典代码

cloudgamer
(追)
等　级：

#3楼得分：0回复于：2009-03-19 08:21:33 顶一下

对我有用[0]
丢个板砖[0]
引用
举报
管理
TOP

精华推荐：类似gmail添加附件

gengzhw
(gengzhw)
等　级：

#4楼得分：3回复于：2009-03-19 08:28:49 帮顶一下

对我有用[0]
丢个板砖[0]
引用
举报
管理
TOP

精华推荐：支持多皮肤的无限极菜单

slowhand
(眼看奔三了，咋还没二够呢)
等　级：

#5楼得分：3回复于：2009-03-19 08:35:51 感谢分享！
收藏先~

对我有用[0]
丢个板砖[0]
引用
举报
管理
TOP

精华推荐：【编程游戏】贺岁放礼花。（第一名奖励10000可用分）（续2）

chinmo
(藏*无限)
等　级：
3

9
更多勋章

#6楼得分：3回复于：2009-03-19 08:44:14 呵呵，不错！

对我有用[0]
丢个板砖[0]
引用
举报
管理
TOP

ccs02287
(空心兜兜)
等　级：
7

4

#7楼得分：3回复于：2009-03-19 09:07:36 前来学习

对我有用[0]
丢个板砖[0]
引用
举报
管理
TOP

jackydrl
(Dr.L)
等　级：

#8楼得分：3回复于：2009-03-19 09:22:52 顶一个，楼主辛苦了，代码下下来，好好拜读一下

对我有用[0]
丢个板砖[0]
引用
举报
管理
TOP

luojihaidao
(HD)
等　级：

#9楼得分：3回复于：2009-03-19 09:42:47 cloudgamer的东西就是好！

对我有用[0]
丢个板砖[0]
引用
举报
管理
TOP

s_liangchao1s
(温故而知新)
等　级：
4

#10楼得分：3回复于：2009-03-19 09:50:58 出本书吧。。。

对我有用[0]
丢个板砖[0]
引用
举报
管理
TOP

zliu789
(好大一条黄瓜。。)
等　级：

#11楼得分：3回复于：2009-03-19 09:57:04 一分也是分啊。

对我有用[0]
丢个板砖[0]
引用
举报
管理
TOP

yushuiyouyue
等　级：

#12楼得分：3回复于：2009-03-19 10:06:16 对AJAX有兴趣的朋友，欢迎加入群78514534
对ASP.NET和C#有兴趣的朋友，欢迎加入67226009

对我有用[0]
丢个板砖[0]
引用
举报
管理
TOP

greatchao88
(银子)
等　级：

#13楼得分：3回复于：2009-03-19 10:09:01

对我有用[0]
丢个板砖[0]
引用
举报
管理
TOP

cloudgamer
(追)
等　级：

#14楼得分：0回复于：2009-03-19 11:08:17 谢谢支持！！

对我有用[0]
丢个板砖[0]
引用
举报
管理
TOP

pdsnet
(忍耐克己)
等　级：

#15楼得分：2回复于：2009-03-19 11:14:46 JS 太差了看你的代码都困难

对我有用[0]
丢个板砖[0]
引用
举报
管理
TOP

fanchuanzhidu
(菜鸟也疯狂)
等　级：

#16楼得分：2回复于：2009-03-19 11:21:33 顶一个！！

对我有用[0]
丢个板砖[0]
引用
举报
管理
TOP

michael110
等　级：

#17楼得分：2回复于：2009-03-19 12:22:59 不错不错！

对我有用[0]
丢个板砖[0]
引用
举报
管理
TOP

cloudgamer
(追)
等　级：

#18楼得分：0回复于：2009-03-19 14:06:47 谢谢支持

对我有用[0]
丢个板砖[0]
引用
举报
管理
TOP

mike_24
(可叵)
等　级：

#19楼得分：2回复于：2009-03-19 15:03:51 学习了

对我有用[0]
丢个板砖[0]
引用
举报
管理
TOP

openface
(openface)
等　级：

#20楼得分：2回复于：2009-03-19 15:19:36 学习了

对我有用[0]
丢个板砖[0]
引用
举报
管理
TOP

cenzige
(岑子哥)
等　级：

#21楼得分：2回复于：2009-03-19 15:35:17 wo下载了，真不错还有美女呢！

对我有用[0]
丢个板砖[0]
引用
举报
管理
TOP

yihaijian1
(紫色~·忧郁...)
等　级：

#22楼得分：2回复于：2009-03-20 00:19:14

楼主的全是好东西啊

对我有用[0]
丢个板砖[0]
引用
举报
管理
TOP

Free_Wind22
( ⊙ o ⊙ )
等　级：

#23楼得分：2回复于：2009-03-20 01:48:51 顶```

对我有用[0]
丢个板砖[0]
引用
举报
管理
TOP

JaggerLee
(在山的那边海的那边有一群程序员)
等　级：

#24楼得分：2回复于：2009-03-20 09:12:08 效果很不错,速度很快,收藏顶贴

对我有用[0]
丢个板砖[0]
引用
举报
管理
TOP

mengshan1986
(蒙山)
等　级：

#25楼得分：2回复于：2009-03-20 10:11:40 楼主的作品不光JavaScript代码漂亮，连mm也很漂亮，收藏了

对我有用[0]
丢个板砖[0]
引用
举报
管理
TOP

cloudgamer
(追)
等　级：

#26楼得分：0回复于：2009-03-20 15:03:02 谢谢支持

对我有用[0]
丢个板砖[0]
引用
举报
管理
TOP

wclszh
(wclszh)
等　级：

#27楼得分：2回复于：2009-03-20 15:45:53 这个东西太好了，叮叮叮

对我有用[0]
丢个板砖[0]
引用
举报
管理
TOP

zzxap
(枫语wang)
等　级：
2

#28楼得分：2回复于：2009-03-20 16:03:58 不错嘛接分

对我有用[0]
丢个板砖[0]
引用
举报
管理
TOP

cloudgamer
(追)
等　级：

#29楼得分：0回复于：2009-03-21 08:44:25 谢谢支持

对我有用[0]
丢个板砖[0]
引用
举报
管理
TOP

sunshine0990
(sunshine0990)
等　级：

#30楼得分：2回复于：2009-03-21 09:01:42 确实不错

对我有用[0]
丢个板砖[0]
引用
举报
管理
TOP

chys3584
(醉梦听琴)
等　级：

#31楼得分：2回复于：2009-03-21 11:40:47 谢谢分享

对我有用[0]
丢个板砖[0]
引用
举报
管理
TOP

lihan6415151528
(lihan6415151528)
等　级：
8

4

#32楼得分：2回复于：2009-03-21 12:13:44 嗯不错

对我有用[0]
丢个板砖[0]
引用
举报
管理
TOP

xiaofanku
(浮生一梦何处醉)
等　级：

#33楼得分：2回复于：2009-03-21 12:21:56

引用 32 楼 lihan6415151528 的回复:
嗯不错

看到了！只能说LZ太棒了

对我有用[0]
丢个板砖[0]
引用
举报
管理
TOP

ming42740923
(明)
等　级：

#34楼得分：2回复于：2009-03-21 21:12:27 js高手有的我好好读读代码了...

对我有用[0]
丢个板砖[0]
引用
举报
管理
TOP

cloudgamer
(追)
等　级：

#35楼得分：0回复于：2009-03-23 08:42:29 谢谢支持

对我有用[0]
丢个板砖[0]
引用
举报
管理
TOP

hhxxcj
(老乌鸦)
等　级：

#36楼得分：0回复于：2009-03-23 08:45:35

该回复于2009-03-25 10:48:46被管理员删除

对我有用[0]
丢个板砖[0]
引用
举报
管理
TOP

zhaokaide
(anyfans)
等　级：

#37楼得分：2回复于：2009-03-23 08:59:30 帮顶

对我有用[0]
丢个板砖[0]
引用
举报
管理
TOP

cloudgamer
(追)
等　级：

#38楼得分：0回复于：2009-03-25 13:50:27

对我有用[0]
丢个板砖[0]
引用
举报
管理
TOP

IBM_hoojo
(hoojo)
等　级：
3

#39楼得分：2回复于：2009-03-25 15:01:16 js 牛人
羡慕哦

对我有用[0]
丢个板砖[0]
引用
举报
管理
TOP

LIHY70
(今天你做了什么？)
等　级：

#40楼得分：2回复于：2009-03-25 15:04:45 向LZ学习！

对我有用[0]
丢个板砖[0]
引用
举报
管理
TOP

sunmm0910
(枫之月色)
等　级：

#41楼得分：2回复于：2009-03-25 16:07:13 好东西

对我有用[0]
丢个板砖[0]
引用
举报
管理
TOP

jol_boy
等　级：

#42楼得分：2回复于：2009-03-25 16:23:09 收藏！好东西！谢谢楼主分享！

对我有用[0]
丢个板砖[0]
引用
举报
管理
TOP

IBM_hoojo
(hoojo)
等　级：
3

#43楼得分：2回复于：2009-03-25 21:23:38 楼主好强大啊

对我有用[0]
丢个板砖[0]
引用
举报
管理
TOP

benjaminwu198818
(学习学习，努力学习…)
等　级：

#44楼得分：2回复于：2009-03-25 22:34:16

什么时候我也可以这样？？？汗…

对我有用[0]
丢个板砖[0]
引用
举报
管理
TOP

cloudgamer
(追)
等　级：

#45楼得分：0回复于：2009-03-26 11:30:48

对我有用[0]
丢个板砖[0]
引用
举报
管理
TOP

IBM_hoojo
(hoojo)
等　级：
3

#46楼得分：1回复于：2009-03-26 11:31:19 牛人哦

对我有用[0]
丢个板砖[0]
引用
举报
管理
TOP

cb1156
(狐狸)
等　级：

#47楼得分：1回复于：2009-03-26 13:38:36 又来发特效了哇。。

对我有用[0]
丢个板砖[0]
引用
举报
管理
TOP

wocow2316
(wocow)
等　级：

#48楼得分：1回复于：2009-03-26 18:53:00 up

对我有用[0]
丢个板砖[0]
引用
举报
管理
TOP

cloudgamer
(追)
等　级：

#49楼得分：0回复于：2009-03-27 09:20:10

对我有用[0]
丢个板砖[0]
引用
举报
管理
TOP

junior_wu
(junior_wu)
等　级：

#50楼得分：1回复于：2009-03-27 10:03:37 真够牛的~！收藏下，然后再学习！

对我有用[0]
丢个板砖[0]
引用
举报
管理
TOP

Fly_yuanrunfei
(Fly_yuanrunfei)
等　级：

#51楼得分：1回复于：2009-03-27 10:15:00

HTML code

                                                                                                                                                www.lanrentuku.com                                                                                                
                                                                                                
                                                                        
                                                来源：ZCOM电子杂志　
                         投稿：分享多一点（一 D~  ）代码整理：懒人图库　 
                        ＊尊重他人劳动成果，转载请自觉注明出处！
                        注：此代码仅供学习交流，请勿用于商业用途。

对我有用[0]
丢个板砖[0]
引用
举报
管理
TOP

Fly_yuanrunfei
(Fly_yuanrunfei)
等　级：

#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 += "";                        ulHTML += "" + (i+1) + "";                        ulHTML += "
";                        }                        //                                           var html = ""+ulHTML+"
";                        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

对我有用[0]
丢个板砖[0]
引用
举报
管理
TOP

Fly_yuanrunfei
(Fly_yuanrunfei)
等　级：

#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 += "";                        ulHTML += "" + (i+1) + "";                        ulHTML += "
";                        }                        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";                        }                        }

对我有用[0]
丢个板砖[0]
引用
举报
管理
TOP

cloudgamer
(追)
等　级：

#54楼得分：0回复于：2009-03-28 11:41:24

对我有用[0]
丢个板砖[0]
引用
举报
管理
TOP

zswang
(伴水清洁工看帖要回贴)
等　级：
2

7
更多勋章

#55楼得分：1回复于：2009-03-28 11:45:18

来晚了

对我有用[0]
丢个板砖[0]
引用
举报
管理
TOP

inspurxin
(inspurxin)
等　级：

#56楼得分：1回复于：2009-03-30 11:28:46 学习啦

对我有用[0]
丢个板砖[0]
引用
举报
管理
TOP

princefbx
(princefbx)
等　级：

#57楼得分：1回复于：2009-03-30 11:47:49 学习学习~

对我有用[0]
丢个板砖[0]
引用
举报
管理
TOP

qiubi
(古迪)
等　级：

#58楼得分：1回复于：2009-03-30 11:52:44 好家伙

对我有用[0]
丢个板砖[0]
引用
举报
管理
TOP

zhaoxinjunNo1
(zhaoxinjunNo1)
等　级：

#59楼得分：1回复于：2009-03-30 11:55:20 顶

对我有用[0]
丢个板砖[0]
引用
举报
管理
TOP

yhjhoo
(王子)
等　级：

#60楼得分：1回复于：2009-03-30 11:57:38 感谢楼主啊

对我有用[0]
丢个板砖[0]
引用
举报
管理
TOP

shenzhiwen
(努力做个程序员)
等　级：

#61楼得分：1回复于：2009-03-30 12:11:11 回头研究！

对我有用[0]
丢个板砖[0]
引用
举报
管理
TOP

xxc3303
(超级奶崽)
等　级：

#62楼得分：1回复于：2009-03-30 12:16:07 楼主大大啊

对我有用[0]
丢个板砖[0]
引用
举报
管理
TOP

Roc_Lee
(Roc_Lee)
等　级：

#63楼得分：1回复于：2009-03-30 13:08:56 收藏了。好东西啊

对我有用[0]
丢个板砖[0]
引用
举报
管理
TOP

net205
(人不可以无耻到这种地步)
等　级：

#64楼得分：1回复于：2009-03-30 13:11:29 学习......

对我有用[0]
丢个板砖[0]
引用
举报
管理
TOP

txt_paul
(paul)
等　级：

#65楼得分：1回复于：2009-03-30 13:11:50 ...路过

对我有用[0]
丢个板砖[0]
引用
举报
管理
TOP

cnnbxy
等　级：

#66楼得分：1回复于：2009-03-30 13:25:29 谢谢，学习了，收藏

对我有用[0]
丢个板砖[0]
引用
举报
管理
TOP

skycc999
(skycc999)
等　级：

#67楼得分：1回复于：2009-03-30 13:29:47 好帖，学习了！顶上去～

对我有用[0]
丢个板砖[0]
引用
举报
管理
TOP

Arc365
(小哥)
等　级：

#68楼得分：1回复于：2009-03-30 13:31:28 收藏了，真是不错的效果

对我有用[0]
丢个板砖[0]
引用
举报
管理
TOP

guanyueqiu
(guanyueqiu)
等　级：

#69楼得分：1回复于：2009-03-30 13:45:27 不错不错！

对我有用[0]
丢个板砖[0]
引用
举报
管理
TOP

beckfun
(时间是检验真理的唯一标准)
等　级：

#70楼得分：1回复于：2009-03-30 13:47:27 收藏先

对我有用[0]
丢个板砖[0]
引用
举报
管理
TOP

silentwins
(技量)
等　级：
2

2

2

#71楼得分：1回复于：2009-03-30 14:17:10 mark

对我有用[0]
丢个板砖[0]
引用
举报
管理
TOP

jrl5365
(king007)
等　级：

#72楼得分：1回复于：2009-03-30 14:42:23 mark

对我有用[0]
丢个板砖[0]
引用
举报
管理
TOP

chen3002min
(求交往-求指导)
等　级：

#73楼得分：1回复于：2009-03-30 15:05:07 这么好的东西,一定要好好读

对我有用[0]
丢个板砖[0]
引用
举报
管理
TOP

jiang_chao
(jiang_chao)
等　级：

#74楼得分：1回复于：2009-03-30 15:55:22 学习一下

对我有用[0]
丢个板砖[0]
引用
举报
管理
TOP

rejoice123
等　级：

#75楼得分：1回复于：2009-03-30 16:41:43 up

对我有用[0]
丢个板砖[0]
引用
举报
管理
TOP

HowardBi
(淡淡三月天)
等　级：

#76楼得分：1回复于：2009-03-30 16:47:06 好东西大家分享，谢谢楼主

对我有用[0]
丢个板砖[0]
引用
举报
管理
TOP

XIAO_G
(XIAO_G)
等　级：

#77楼得分：1回复于：2009-03-30 16:48:59 支持一下!!!

对我有用[0]
丢个板砖[0]
引用
举报
管理
TOP

hcz830126
(美好未来)
等　级：

#78楼得分：1回复于：2009-03-30 16:53:54 好东西，看了就激动，怎能不顶！

对我有用[0]
丢个板砖[0]
引用
举报
管理
TOP

limo27
等　级：

#79楼得分：1回复于：2009-03-30 17:00:25 打算一会儿就试验一下正好可以放到毕业设计里不错呵呵

对我有用[0]
丢个板砖[0]
引用
举报
管理
TOP

xiazhijiang520
(玖伍贰柒)
等　级：

#80楼得分：1回复于：2009-03-30 17:10:59 精神可嘉，顶起`

对我有用[0]
丢个板砖[0]
引用
举报
管理
TOP

pengy555
等　级：

#81楼得分：1回复于：2009-03-30 17:13:10 不错，值得学习

对我有用[0]
丢个板砖[0]
引用
举报
管理
TOP

Free_Wind22
( ⊙ o ⊙ )
等　级：

#82楼得分：1回复于：2009-03-30 17:15:38

对我有用[0]
丢个板砖[0]
引用
举报
管理
TOP

yaomin65
(ym)
等　级：

#83楼得分：1回复于：2009-03-30 17:17:34 学习

对我有用[0]
丢个板砖[0]
引用
举报
管理
TOP

Lucas22
(Lucas)
等　级：

#84楼得分：1回复于：2009-03-30 17:38:48 学习

对我有用[0]
丢个板砖[0]
引用
举报
管理
TOP

nuero
(我的坚持)
等　级：

#85楼得分：1回复于：2009-03-30 17:49:44 就喜欢顶牛人的贴

对我有用[0]
丢个板砖[0]
引用
举报
管理
TOP

benjaminwu198818
(学习学习，努力学习…)
等　级：

#86楼得分：1回复于：2009-03-30 18:17:28

再次路过。。。。

对我有用[0]
丢个板砖[0]
引用
举报
管理
TOP

xjjyLOVE
(锦欢帝国)
等　级：

#87楼得分：1回复于：2009-03-30 18:49:53 dsfdsfds

对我有用[0]
丢个板砖[0]
引用
举报
管理
TOP

samson77
(samson77)
等　级：

#88楼得分：1回复于：2009-03-30 20:29:50 不错~~技术好高

对我有用[0]
丢个板砖[0]
引用
举报
管理
TOP

huwuling922
(充电中...)
等　级：

#89楼得分：1回复于：2009-03-30 21:31:56 赞！学习了。。

对我有用[0]
丢个板砖[0]
引用
举报
管理
TOP

smallkonrad
(hj)
等　级：

#90楼得分：1回复于：2009-03-30 21:43:59 高手

对我有用[0]
丢个板砖[0]
引用
举报
管理
TOP

fancy_cecilia
等　级：

#91楼得分：1回复于：2009-03-30 22:01:37 虽然现在还看不懂，收藏先

对我有用[0]
丢个板砖[0]
引用
举报
管理
TOP

yongyuanzhiyin
(yongyuanzhiyin)
等　级：

#92楼得分：1回复于：2009-03-30 22:17:36 不错，收藏学习了

对我有用[0]
丢个板砖[0]
引用
举报
管理
TOP

qiweihero
(不要只看到我我优点、)
等　级：

#93楼得分：1回复于：2009-03-30 22:48:23 JAVASCRIPT不错哦

对我有用[0]
丢个板砖[0]
引用
举报
管理
TOP

dandelionl
(飘)
等　级：

#94楼得分：1回复于：2009-03-30 23:59:29 mark

对我有用[0]
丢个板砖[0]
引用
举报
管理
TOP

zxy397472251
(︶ㄣ問天ヤ)
等　级：

#95楼得分：1回复于：2009-03-31 08:19:51 TRFHTJHTY

对我有用[0]
丢个板砖[0]
引用
举报
管理
TOP

sq_zhuyi
(路人乙)
等　级：

#96楼得分：1回复于：2009-03-31 08:54:59 不错

对我有用[0]
丢个板砖[0]
引用
举报
管理
TOP

ZHANGJIZELOVEBJ
(阿耀)
等　级：

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

挺不错的啊！

对我有用[0]
丢个板砖[0]
引用
举报
管理
TOP

qiaozirue
(qiaozirue)
等　级：

#98楼得分：1回复于：2009-03-31 09:46:51 收藏了.谢谢LZ

对我有用[0]
丢个板砖[0]
引用
举报
管理
TOP

wenbin63
等　级：

#99楼得分：1回复于：2009-03-31 10:00:10 好东西啊，收了

对我有用[0]
丢个板砖[0]
引用
举报
管理
TOP

chenshuangyu
(chenshuangyu)
等　级：

#100楼得分：1回复于：2009-03-31 10:00:49 很不错呢

JavaScript 图片切换展示效果 - Web 开发 / JavaScript JavaScript 图片滑动切换效果动态切换图片的JavaScript的代码1 JavaScript经典效果集锦 jQuery Tools-内容展示型 Web UI 库-JavaScript高级-Java... JavaScript经典效果集锦 3 JavaScript 拖放效果 - cloudgamer - 博客园 JavaScript获取图片的原始尺寸 JavaScript教程 javascript表单 JavaScript - Wikipedia Javascript Test JavaScript editing 高效 JavaScript Javascript Document JavaScript老家 Javascript基础知识 FLASH图片切换效果kmmj JavaScript制作网页图片小特效5例， javascript 改变鼠标样式 javascript中的函数 javascript表单验证大全, JavaScript调用后台webservice javascript键盘事件总结