デモソースコードを使用したネイティブ JavaScript イメージの自動または手動切り替えの例

デモソースコードを使用したネイティブ JavaScript イメージの自動または手動切り替えの例_JavaScript スキル

WBOY

リリース： 2016-05-16 17:23:30

オリジナル

1128 人が閲覧しました

一、效果图
デモソースコードを使用したネイティブ JavaScript イメージの自動または手動切り替えの例_JavaScript スキル
二、html代码

复制代代码如下:

三、源代码

复制代码代码如下:

 
var $ = function (id) { 
return "string" == typeof id ? document.getElementById(id) : id; 

var Class = { 
create: function() { 
return function() { 
this.initialize.apply(this, argument) 
} 
} 
} 

オブジェクト.extend = function(destination, source) { 
for (source の var プロパティ) { 
destination[property] = source[property] 
} 
return destination; >
var TransformView = Class.create(); 
TransformView.prototype = { 
//コンテナオブジェクト、スライディングオブジェクト、スイッチングパラメータ、スイッチング番号
initialize: function(container, slider,parameter, count, options) { 
if(parameter var oContainer = $(コンテナ), oSlider = $(スライダー), oThis = this; 
this.Index = 0;//現在のインデックス

this._timer = null;//タイマー
this._slider = oSlider;//スライディングオブジェクト
this._parameter =parameter ; //スイッチパラメータ
this._count = count 0;//スイッチ数量
this._target = 0;//ターゲットパラメータ

this.SetOptions(options); 🎜>this.Up = !!this.options.Up; 
this.Step = Math.abs(this.options.Step); 
this.Time = Math.abs(this.options.Time) ; 
this.Auto = !!this.options.Auto; 
this.Pause = Math.abs(this.options.Pause); 
this.onStart = this.options.onStart; .onFinish = this.options.onFinish; 

oContainer.style.overflow = "hidden"; 
oContainer.style.position = "relative"; "absolute"; 
oSlider.style.top = oSlider.style.left = 0; 
}, 
//デフォルトのプロパティを設定します 
SetOptions: function(options) { 
this. options = {//デフォルト値
上: true,// 上に行くかどうか (それ以外の場合は左へ) 
ステップ: 5,//スライディング変化率
時間: 10,//スライディング遅延
 Auto: true,//自動変換するかどうか 
Pause: 2000,//一時停止時間（Auto が true の場合に有効） 
onStart: function(){},// 変換開始時に実行
 onFinish: function (){}//変換が完了したら実行
} 
Object.extend(this.options, options || {}); 
}, 
//切り替えを開始settings
Start : function() { 
if(this.Index < 0){ 
this.Index = this._count - 1; 
} else if (this.Index >= this) ._count){ this .Index = 0; } 

this._target = -1 * this._parameter * this.Index; 
this.onStart() 
this.Move(); 
}, 
//Move
Move: function() { 
clearTimeout(this._timer); 
var oThis = this, style = this.Up "top" : "left ? ", 
 iNow = parseInt(this._slider.style[style]) || 0, 
iStep = this.GetStep(this._target, iNow); 

if (iStep != 0 ) { 
 this._slider.style[style] = (iNow iStep) "px"; 
this._timer = setTimeout(function(){ oThis.Move(); }, this.Time); >} else { 
this._slider.style[style] = this._target "px"; 
this.onFinish(); 
if (this.Auto) { this._timer = setTimeout(function( ){ oThis.Index ; oThis.Start(); }, this.Pause); } 
} 
}, 
//ステップサイズを取得します
GetStep: function(iTarget, iNow) 
var iStep = (iTarget - iNow) / this.Step; 
if (iStep == 0) return 0; 
if (Math.abs(iStep)  0) ? 1 : -1) ; 
return iStep; 
//Stop
Stop: function(iTarget, iNow) { 
clearTimeout(this._timer); ._slider.style[this .Up ? "top" : "left"] = this._target "px" 
} 
}; 

window.onload=function(){ 
関数 Each(list, fun){ 
for (var i = 0, len = list.length; i }; 🎜>
var objs = $("idNum2").getElementsByTagName("li"); 

var tv = new TransformView("idTransformView2", "idSlider2", 408, 3, { 
 onStart: function(){ Each(objs, function(o, i){ o.className = tv.Index == i ? "on" : ""; }) },//ボタン スタイル 
上: false 
}); 

tv.Start(); 

Each(objs, function(o, i){ 
o.onmouseover = function(){ 
o. className = "on"; 
tv.Index = i; 
o.onmouseout = function(); >o.className = " "; 
tv.Auto = true 
} 
}) 
} 

 
一目見てわかるので、コードについては詳しく説明しません。 

デモとソース ファイルのダウンロード