中文字幕二区_国产精品免费在线观看_黄色网站观看_人人草人人澡_日本真实娇小xxxx

使用說明

實例化需要3個參數(shù)，分別是容器對象，滑動對象和切換數(shù)量，之后可以直接執(zhí)行Run方法運行：

new SlideTrans("idContainer", "idSlider", 3).Run();

還有以下可選屬性：

• Vertical: true,//是否垂直方向（方向不能改）
• Auto:  true,//是否自動
• Change:  0,//改變量
• Duration: 50,//滑動持續(xù)時間
• Time:  10,//滑動延時
• Pause:  2000,//停頓時間(Auto為true時有效)
• onStart: function(){},//開始轉(zhuǎn)換時執(zhí)行
• onFinish: function(){},//完成轉(zhuǎn)換時執(zhí)行
• Tween:  Tween.Quart.easeOut//tween算子

其中Vertical初始化后就不能修改，Tween算子可參照這里的緩動效果選擇（實例中選了其中3個）。

還有提供了以下方法：

• Next: 切換下一個
• Previous: 切換上一個
• Stop: 停止自動切換
• 還有上面說到的Run

程序代碼：

代碼拷貝框
var SlideTrans = function(container, slider, count, options) { this._slider = $(slider); this._container = $(container);//容器對象 this._timer = null;//定時器 this._count = Math.abs(count);//切換數(shù)量 this._target = 0;//目標(biāo)值 this._t = this._b = this._c = 0;//tween參數(shù) this.Index = 0;//當(dāng)前索引 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";//方向 //樣式設(shè)置 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 = { //設(shè)置默認(rèn)屬性 SetOptions: function(options) { this.options = {//默認(rèn)值 Vertical: true,//是否垂直方向（方向不能改） Auto: true,//是否自動 Change: 0,//改變量 Duration: 50,//滑動持續(xù)時間 Time: 10,//滑動延時 Pause: 2000,//停頓時間(Auto為true時有效) onStart: function(){},//開始轉(zhuǎn)換時執(zhí)行 onFinish: function(){},//完成轉(zhuǎn)換時執(zhí)行 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); //設(shè)置參數(shù) 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); //未到達(dá)目標(biāo)繼續(xù)移動否則進(jìn)行下一次滑動 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); } };
[Ctrl+A 全部選擇 然后拷貝]

本文鏈接：http://www.95time.cn/tech/web/2009/7031.asp　

出處：藍(lán)色理想
責(zé)任編輯：bluehearts

上一頁 JavaScript 圖片滑動切換效果 [1] 下一頁

◎進(jìn)入論壇網(wǎng)頁制作、WEB標(biāo)準(zhǔn)化版塊參加討論，我還想發(fā)表評論。