JavaScript ノンストップ画像スクロールと clickable_image 特殊効果-jsチュートリアル-php.cn

css:

复制代码代码如下:

html代码

复制代代以下のように:

商品1

商品2

商品3

商品4

商品5

商品6

商品7

>>>>>>

JS代記入

复制代記入

代記入如下:

//速度(ミリ秒) 
var Speed = 10; 
//毎回移動(px) 
var Space = 5;各ページめくり
var PageWidth = 132; 
// 全体のシフト (px) 
var fill = 0 
// 自動的に移動するかどうか、移動する場合は true、移動しない場合は false
 var MoveLock = false; 
// 時間オブジェクトを移動します
var MoveTimeObj;// 変数を上下に切り替えます。comp が 0 より小さい場合は上に反転され、そうでない場合は下に反転されます。 var Comp = 0; 
//オブジェクトを上下に移動 
var AutoPlayObj = null; 
//div List1 のすべての要素を div list2 に割り当てます 
GetObj("List2").innerHTML = GetObj ("List1").innerHTML; 
 // 左に移動 
GetObj('ISL_Cont').scrollLeft = fill; 
// マウスが div の上に移動したときに、div ISL_Cont をイベントにバインドします。 
GetObj("ISL_Cont").onmouseover = function(){ clearInterval(AutoPlayObj); // にマウスが移動すると、イベントがクリアされて自動的に再生されます。 div ISL_Cont を、マウスが div の先頭から離れる時間にバインドします。イベントは、マウスが div 画像から離れると、一定間隔で自動的に再生を開始します。
GetObj(" ISL_Cont").onmouseout = function(){ AutoPlay();} 
// 初めてのデフォルトのバインディングは autoplay
AutoPlay(); 
/* 
指定された HTML オブジェクトを取得します
*/ 
function GetObj(objName){ 
//ページ内に有効な要素タグがあるかどうかを判断、document.getElementById は Firefox と互換性があります 
if(document.getElementById) 
{ 
return eval('document.getElementById("' objName '")') 
} 
else 
{ 
return eval('document.all.' objName) 
 } 
} 
/* 
自動スクロール
*/ 
function AutoPlay (){ 
//以前にバインドされた間隔ローリングをクリア 
clearInterval(AutoPlayObj); //間隔ローリングを再バインドします。setInterval() メソッドは指定された時間に実行されるようにバインドされ、clearInterval() メソッドは指定された時間バインディング オブジェクトをクリアします。
AutoPlayObj = setInterval('ISL_GoDown();ISL_StopDown(); ',5000); 
} 
/* 
起動開始
 */ 
function ISL_GoUp(){ 
//現在自動再生中の場合、次のコードは実行されません。 
if(MoveLock) 
return; 
//以前にバインドされた間隔をクリアします。 Scroll
clearInterval(AutoPlayObj); 
MoveLock = true;指定された時間内に
MoveTimeObj = setInterval('ISL_ScrUp();',Speed); 
} 
/* 
スクロールを停止
*/ 
function ISL_StopUp(){ 
//以前にバインドされたスクロール間隔をクリアします
clearInterval(MoveTimeObj); 
 //現在表示されている画像の div 側の変数距離が最初の商品画像であるかどうかを判断します。0 に等しくない場合は、それ以外の場合は、最初の画像と同じです。 
if(GetObj('ISL_Cont').scrollLeft % PageWidth - fill != 0) 
{ 
//div 左マージンの移動
Comp = fill - (GetObj('ISL_Cont').scrollLeft % PageWidth); 
//移動開始
 CompScr(); 
}else 
MoveLock = false; 
} 
//自動再生
AutoPlay(); 
} 
/* 
 アップアクション
*/ 
function ISL_ScrUp(){ 
//現在の画像の大きい div の左マージンが 0 未満の場合、そのマージンは、そのマージンに左側のクリック ボタンの幅を加えたものに等しくなります
if(GetObj('ISL_Cont').scrollLeft < ;= 0) 
{ 
GetObj('ISL_Cont').scrollLeft = GetObj('ISL_Cont').scrollLeft GetObj('List1').offsetWidth 
} 
//左に移動
GetObj('ISL_Cont').scrollLeft -= Space ; 
} 
/* 
下にスクロール
*/ 
 function ISL_GoDown(){ 
//前をクリアバウンド間隔スクロール
clearInterval(MoveTimeObj); 
//現在自動再生中の場合、次のコードは実行されません 
if(MoveLock) 
return; 🎜>clearInterval(AutoPlayObj); 
MoveLock = true; 
//下にスクロールメソッド
ISL_ScrDown(); 
//指定された時間内に自動的に右に移動します
MoveTimeObj = setInterval ('ISL_ScrDown()',Speed); 
} 
/* 
下スクロールを停止
*/ 
function ISL_StopDown() { 
//以前にバインドされた間隔スクロールをクリアします 
clearInterval(MoveTimeObj); 
//現在のピクチャの大きな div の左マージンが 0 より小さい場合、そのマージンは、そのマージンにクリックされたボタンの左の幅を加えたものと等しくなります。 if(GetObj('ISL_Cont').scrollLeft % PageWidth - fill != 0 ) 
{ 
Comp = PageWidth - GetObj('ISL_Cont').scrollLeft % PageWidth fill; >}else 
{ 
MoveLock = false; 
} 
// 自動再生を開始します
AutoPlay(); 
/* 
スクロールダウンアクション
*/ 
function ISL_ScrDown(){ 
if(GetObj('ISL_Cont').scrollLeft >= GetObj('List1').scrollWidth) 
{ 
GetObj('ISL_Cont')。スクロール左 = GetObj('ISL_Cont').scrollLeft - GetObj('List1').scrollWidth; 
GetObj('ISL_Cont').scrollLeft = スペース;左右移動制御処理
*/ 
function CompScr(){ 
var num; 
if(Comp == 0) 
{ 
MoveLock = false; ; 
} 
//上に反転
if(Comp < 0) 
{ 
if(Comp < -Space) 
{ 
 Comp = Space; >num = スペース; 
}else 
{ 
num = -Comp; 
} 
GetObj('ISL_Cont').scrollLeft -= num; >setTimeout('CompScr()',Speed); 
}else //オフにする
{ 
if(Comp > Space) 
{ 
Comp - = Space; num = スペース; 
}else 
{ 
comp = 0;
GetObj('ISL_Cont').scrollLeft = num; 
setTimeout('CompScr()',Speed); 
} 
} 