Bagaimana untuk melaksanakan penatalan imej dengan JavaScript

Kaedah JavaScript untuk melaksanakan penatalan imej: [<script>var timer;var speed=10;var box=document.getElementById("box");var boxin=document.getEl...]. </script>

Persekitaran pengendalian artikel ini: sistem windows10, javascript 1.8.5, komputer thinkpad t480.

Mari kita lihat dahulu prinsip untuk mencapai kesan penatalan imej:

Kotak hitam ialah kawasan di mana imej menatal akhirnya dipaparkan, dan kotak hijau ialah sub-bekasnya. Lebarnya mestilah lebih besar daripada kotak luar hitam, supaya imej boleh ditatal dengan menetapkan tatal Kiri kotak hitam. Kotak biru paling dalam digunakan untuk membalut semua imej yang ditatal, manakala kandungan kotak ungu akan sama dengan kotak biru pada masa hadapan untuk membolehkan penatalan imej yang lancar. Gunakan pemasa JS untuk menukar nilai atribut scrollLeft kotak hitam pada selang masa tertentu untuk membuat tatal imej ke kiri Pada masa yang sama, nilai scrollLeft ditentukan Jika nilainya mencapai bahagian paling kanan hitam bekas kotak, ini bermakna kotak biru Kotak hitam telah ditatal ke kiri, dan kotak ungu berada di dalam kotak hitam. Pada masa ini, anda perlu menetapkan nilai scrollLeft kotak hitam kepada 0 dan mulakan semula.

Kod pelaksanaan khusus:

kod 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>

kod 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>

kod 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>

Pembelajaran yang disyorkan: tutorial video javascript

Atas ialah kandungan terperinci Bagaimana untuk melaksanakan penatalan imej dengan JavaScript. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!