js slideshow_javascript スキルの実装

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

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:

コードをコピー

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


>

demo_1 の場合、firstChild の強度を継続的に維持することで、demo_3 と同様の効果が得られます。
demo_4

代码 代码如下:

"http:/ /www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

上と同様、原理的には変わらないが、さらに透明度を設けて、写真の透明度を1か国から0にすることも可能であり、したがって切り替え効果も発生し、コードの変更もわずかである。 🎜>demo_5：

复制代 代码如下:

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional .dtd">

の例では、特定の範囲と配列を独自に再構成する必要があるが、異なる配列の組み合わせは、別の方法でも実現できます。

最後に、大家都懂的、CSS3 もいくつかの幻灯片効果を実現できます、

demo_7:

复制代


代幣如下:

"http://www.w3.org/TR/html4/loose.dtd">

• 


• 


• 


• 

网上的例子很多，以后慢慢补充。

このウェブサイトの声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。