jsの実用的なノンストップスクロール効果（互換性良好）_画像特殊効果

これは、基本的に、構造と動作が分離されているため、この 2 つの接続には 1 つの
ID のみが必要であり、同じ JS コードでこのページに複数のスクロール チャート効果を実現できます。
1.xhtml

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

< /tr>

= "デモ2">

; img src="img.jpg">

スクロール 1

スクロール チャート 2

スクロール チャート 3

src="img.jpg">

スクロール図 4
table>






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


ul,li,img,td{font-size:12px;list-style-type:none;text-align:center;margin:0;padding: 0;}
.demo{width:230px;margin-bottom:8px;height:172px;overflow:hidden;}
.demo ul{width:408px;clear:both;}
.demo li {width: 102px;float:left;text-align:center;}
.demo img{margin-bottom:8px;}


3.js

コードをコピーします

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


function startmarquee(lh,speed,delay,index) {
var o =document.getElementById("デモ" インデックス);
var o_td=o.getElementsByTagName("td")[0];
var str=o_td.innerHTML; =document.createElement(" td");

newtd.parentNode.appendChild(newtd);
var p=false; onmouseover=function(){ p=true;}
o.onmouseout=function() {p=false;}
function start(){
t=setInterval(Marquee,speed); if(!p){ o.scrollLeft = 3;}

} 関数 Marquee(){ if(o_td.offsetWidth-o.scrollLefto.scrollLeft-=o_td .offsetWidth; else{ if(o.scrollLeft%lh!=0){ o.scrollLeft = 3

}else{clearInterval(t);}

}
}
setTimeout(start,lay);
}
startmarquee(102,1,1500,1);//画像間のスクロールを停止します
startmarquee(102,30) ,1,2) ;// 画像の中断のないスクロール


テスト コード: 通常に実行するには、HTML ファイルがロードされた後に js を実行する必要があるため、原則として div の後に js を置くことを忘れないでください。画像のスクロールとテキストのスクロールはほぼ同じです。
デモコード:

;ul>

スクロール 1

スクロール チャート 2

スクロール チャート 3

テーブル>

• 
  スクロール チャート 1
• 
  スクロール チャート 2
• 
  図 3 をスクロール
• 
  図 4 をスクロール

• 
  滚动图1
• 
  滚动图2
• 
  滚动图3
• 
  滚动图4

[Ctrl A すべて選択 注: 外部 Js を導入する必要がある場合は、更新して実行する必要があります ]
コードは 102 用です。 画像の幅はコード内で変更できます。画像のサイズに合った幅のみを完全に実行できます。