1。概要
ループ内の画像のスクロールは、Webページに動的効果を追加するだけでなく、ページスペースを保存し、限られたページにさらに多くの写真が表示されるようにすることもできます。
2。技術的なポイント
主な方法は、画像のループスクロール効果を実現するために使用されます。 Settimeout()メソッドの構文形式は次のとおりです。
setimeout(function、milliseconds、[arguments])
パラメーター説明:
a。関数:呼び出されるJavaScriptカスタム関数の名前。
b。ミリ秒:タイムアウト時間をミリ秒単位で設定します。
関数:タイムアウト時間が終了した後、関数は呼び出されます。この値は、ClearTimeout()関数でクリアできます。
3。特定の実装
(1)ページの適切な位置にID属性デモを備えた<div>タグを追加し、タグに表示するテーブルと画像を追加します。重要なコードは次のとおりです。
<div id = "demo" style = "overflow:hidden; width:455px; height:166px;"> <table cellpacing = "0" cellpadding = "0"> <tr> <td valign = "top" id = "marquepic1"> <! - 写真to speic = <table = "centerpadding =" align = "center"> <%for(int i = 1; i <8; i ++){%> <td> <img src = "images/<%= i%>。jpg"> </td> <%}%> </table> </td> <td id = "marquepic2"> </td> </table>(2)カスタムJavaScript関数Move()を記述して、途切れない画像ループスクロール効果を実現します。速度値が大きいほど、画像が速くスクロールします。特定のコードは次のとおりです。
<スクリプト言語= "javascript"> var speed = 30; //間隔時間marquepic2.innerhtml = marquepic1.innerhtml; var demo = document.getElementById( "demo"); //デモオブジェクト関数Marquee(n){//画像ループスクロールを実現する方法(marquepic1.offsetwidth-demo.scrollleft <= 0){demo.scrollleft = 0; } else {demo.scrollleft = demo.scrollleft+n;}} var mymar = setinterval( "marquee(5)"、speed); demo.onmouseover = function(){// clearinterval(mymar);} demo.onmouseout = function(){// mymar = setinterval( "marquee(5)"、speed);} </script>上記は、編集者が画像ループスクロール効果を実現するために紹介したJavaScriptコードに関する関連する知識です。それがあなたに役立つことを願っています。ご質問がある場合は、メッセージを残してください。編集者は時間内に返信します。 wulin.comのウェブサイトへのご支援ありがとうございます!