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のウェブサイトへのご支援ありがとうございます！