原理:
1. ULにドキュメントストリームから分離する絶対的な位置を与え、左に設定し、画像をULに詰め、「移動」関数を書き込み、関数関数はULの左走行を正の速度で右に走らせることができます。
2.タイマーを設定して、30ミリ秒ごとに「移動」関数を実行する(可変パラメーター)
3。ULの長さは「実行」されるため、ULの含有量、つまりIMGを2倍にすることができます。
oul.innerhtml += oul.innerhtml;
4。この時点で、ULの含有量が増加するため、その幅も増加し、表示される写真の数は実際のプロジェクトに従って変化したり不確実になったりする可能性があります。
oul.style.width = oli.length*oli [0] .offsetwidth+'px';
5.「移動」関数にコードを追加します。
5.1この時点で、ULは右に移動します。 ULがoffsetLeft> 0の場合、ULを左の「ULの幅の半分」に引きます。つまり、ULが制限なく右に移動できるようにします。
if(oul.offsetLeft> 0){oul.style.left = -oul.offsetwidth/2+'px';}5.2 ULが左に移動し、そのオフセットレフトがULの幅の半分を実行すると、UL全体を最初の左に戻します:0;
if(oul.offsetLeft <-oul.OffsetWidth/2){oul.style.Left = 0; }コード:
HTML:
<div id = "box"> <ul> <li> <a href = "#"> <img src = "1.jpg"/> </a> </li> <li> <a href = "#"> <img src = "2.jpg"/> </a> </li> <a href = " /> </a> </li> <li> <a href = "#"> <img src = "3.jpg"/> </a> </li> </div>
CSS:
* {マージン:0;パディング:0;} #box {width:480px;高さ:110px;境界線:1px赤色の固体;マージン:100px Auto;オーバーフロー:隠し;位置:相対; } #box ul {position:absolute;左:0; TOP:5px;} #box ul li {list-style:none;フロート:左;幅:100px;高さ:100px;パディング左:16px; } #box ul li img {width:100px;高さ:100px;}JS:
<Script> window.onload = function(){var odiv = document.getElementById( 'div1'); var oul = odiv.getelementsbytagname( 'ul')[0]; var oli = oul.getelementsbytagname( 'li'); var aa = document.getElementsByTagname( 'a'); var ispeed = 10; // ul.innerhtml += oul.innerhtmlを移動する速度をulにしてもらう。 oul.style.width = oli.length*oli [0] .offsetwidth+'px'; aa [0] .onclick = function(){ispeed = -10; }; aa [1] .onclick = function(){ispeed = 10; }; function fnmove(){if(oul.offsetLeft <-oul.OffsetWidth/2){//負の数は、ULの左が負の数であるためです。 } else if(oul.offsetLeft> 0){oul.style.left = -oul.offsetwidth/2+'px'; } oul.style.left = oul.offsetleft+ispeed+'px'; // UL全体が右に移動します}; varタイマー= null; ClearInterval(タイマー); Timer = setInterval(fnmove、30); oul.onmouseover = function(){clearInterval(タイマー); }; oul.onmouseout = function(){timer = setInterval(fnmove、30); //マウスが移動したときにこのタイマーを実行します}; }; </script>エラーがある場合は、修正してください。
上記のシームレスなスクロールシンプルな実装コード(推奨)は、私があなたと共有するすべてのコンテンツです。参照を提供できることを願っています。wulin.comをもっとサポートできることを願っています。