ホームページ > 記事 > ウェブフロントエンド > JavaScriptで左右シームレススクロール画像効果を実現するケース
この記事では、画像のシンプルで絶妙な左右のシームレスなスクロール効果を実現するためのJavaScriptを主に紹介します。これには、ページ要素の属性を動的に操作するための時間関数と組み合わせたJavaScriptの関連技術が含まれます。 Javascriptの簡単な実装を例とともに説明します。 絶妙な画像のシームレスな左右スクロール効果。参考のために皆さんと共有してください。詳細は次のとおりです:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>图片滚动</title> </head> <body> <style type="text/css"> <!-- #picScroll {background: #FFF;overflow:hidden;border: 1px dashed #CCC;width: 745px;} #picScroll img {border: 3px solid #F2F2F2;} #picSp {float: left;width: 800%;} #picSp1 {float: left;} #picSp2 {float: left;} --> </style> <p id="picScroll"> <p id="picSp"> <p id="picSp1"> <a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ><img src="./img/a1.jpg" border="0" width="185" height="240" /> </a> <a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ><img src="./img/a2.jpg" border="0" width="185" height="240" /> </a> <a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ><img src="./img/a3.jpg" border="0" width="185" height="240" /> </a> <a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ><img src="./img/a4.jpg" border="0" width="185" height="240" /> </a> <a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ><img src="./img/a5.jpg" border="0" width="185" height="240" /> </a> <a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ><img src="./img/a6.jpg" border="0" width="185" height="240" /> </a> <a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ><img src="./img/a7.jpg" border="0" width="185" height="240" /> </a> <a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ><img src="./img/a8.jpg" border="0" width="185" height="240" /> </a> <a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ><img src="./img/a9.jpg" border="0" width="185" height="240" /> </a> <a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ><img src="./img/a10.jpg" border="0" width="185" height="240" /> </a> <a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ><img src="./img/a11.jpg" border="0" width="185" height="240" /> </a> <a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ><img src="./img/a12.jpg" border="0" width="185" height="240" /> </a> </p> <p id="picSp2"></p> </p> </p> <script> <!-- var speed=10; var picS=document.getElementById("picScroll"); var picS1=document.getElementById("picSp1"); function Marquee(){ if(picS.scrollLeft >= picS1.offsetWidth) picS.scrollLeft =0; else{ picS.scrollLeft++; } } var MyMar=setInterval(Marquee,speed); picS.onmouseover=function() {clearInterval(MyMar)}; picS.onmouseout=function() {MyMar=setInterval(Marquee,speed)}; --> </script> </body> </html>
以上がJavaScriptで左右シームレススクロール画像効果を実現するケースの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。