js slideshow_javascript スキルの実装-jsチュートリアル-php.cn

js slideshow_javascript スキルの実装

WBOY

リリース： 2016-05-16 17:58:43

オリジナル

1171 人が閲覧しました

他の効果を無視すると、最も単純なカルーセルには、

parent.appendChild(parent.firstChild) という 1 つのステートメントのみが含まれます。これは、リストの要素を最後の要素に継続的に追加し、appendChild によってノードが元の位置から変更されます。が削除されるため、スイッチング効果が得られます。

1 点、IE ではテキストノードの扱いが他のブラウザとは異なります。また、FF のバージョンが異なると、children 属性にも注意する必要があります。

以下のデモでは、#view の overflow:hidden を設定していません。

demo_1:

コードをコピーコードは次のとおりです:

< ;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  

 ;body> 

 🎜>< ;script type="text/javascript"> 
var img_list = document.getElementById('img_list'); 
setInterval(function(){ 
img_list.appendChild(img_list.firstChild); 
 },500) 

 (上記のデモは、後のデモのために実際にフローティングなしで使用できます) 
もう 1 つの方法は、ノードの順序を変更せずにリスト全体を特定の方向に移動することです (継続的に変更します)リストの順序) left 属性)、
demo_2: