JavaScriptで画像スクロールを実装する方法

画像スクロールを実装する JavaScript メソッド: [<script>var timer;var Speed=10;var box=document.getElementById("box");var boxin=document.getEl...]。 </script>

#この記事の動作環境: Windows10 システム、JavaScript 1.8.5、thinkpad t480 コンピューター。

まず、画像のスクロール効果を実現する原理を見てみましょう:

黒いボックスは、スクロール画像が最終的に表示される領域です。緑色のボックスはそのサブコンテナであり、黒いボックスのscrollLeftを設定することで画像をスクロールできるように、その幅は黒い外側のボックスより大きくなければなりません。最も内側の青いボックスは、スクロールされるすべての画像をラップするために使用されますが、紫色のボックスの内容は、将来的には青いボックスと同じになり、シームレスな画像スクロールを可能にします。 JSタイマーを使用してブラックボックスのscrollLeft属性の値を一定間隔で変更し、画像を左にスクロールさせると同時にscrollLeftの値を決定し、その値がブラックボックスコンテナの右端に達した場合、これは、青いボックスが黒いボックスを左にスクロールし、紫のボックスが黒いボックスのすぐ内側にあることを意味します。このとき、ブラックボックスのscrollLeft値を0に設定してやり直す必要があります。

具体的な実装コード:

html コード:

<!\-\- 最外层盒子 --\> 
<div id="box"> 
	<div id="boxin"> 
		<div id="neirong"> 
			<img src="/static/imghwm/default1.png"  data-src="Images/C_2.jpg"  class="lazy"   alt=""> 
			<img src="/static/imghwm/default1.png"  data-src="Images/C_3.jpg"  class="lazy"   alt=""> 
			<img src="/static/imghwm/default1.png"  data-src="Images/C_4.jpg"  class="lazy"   alt=""> 
			<img src="/static/imghwm/default1.png"  data-src="Images/C_5.jpg"  class="lazy"   alt=""> 
			<img src="/static/imghwm/default1.png"  data-src="Images/C_6.jpg"  class="lazy"   alt=""> 
		</div> 
		<div id="neirong2"></div> 
	</div> 
</div>

css コード:

	*{
		margin: 0; 
		padding: 0; 
	} 
	#box{ 
		height: 100px; 
		width: 500px; 
		overflow: hidden; 
	} 
	#boxin{ 
		width: 1064px; 
		height: 100px; 
	}
    #neirong{
        float: left;
    }
    #neirong2{
        float: left;
    }
    img{
        width: 100px;
        height: 100px;
    }
</style>

js コード:

<script>
        var timer;
        var speed=10;
        var box=document.getElementById("box");
        var boxin=document.getElementById("boxin");
        var neirong=document.getElementById("neirong");
        var neirong2=document.getElementById("neirong2");
        neirong2.innerHTML=neirong.innerHTML;
 
        function move(){
            if(neirong2.scrollWidth-box.scrollLeft<=0){
                box.scrollLeft=0;
            }else{
                box.scrollLeft++;
            }            
        }
        box.onmouseover=function(){
            clearInterval(timer);
        }
        box.onmouseout=function(){
            timer=setInterval(move,speed);
        }
        timer=setInterval(move,speed);
    </script>

推奨される学習: JavaScript ビデオ チュートリアル

以上がJavaScriptで画像スクロールを実装する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。