Javascript merealisasikan kemahiran menatal images_javascript yang lancar

Kesan: Apabila tetikus bergerak ke dalam gambar, penatalan berhenti, apabila tetikus bergerak keluar, ia secara automatik menatal

Boleh melaraskan tatal ke arah kiri atau kanan

Salin kod Kod adalah seperti berikut: * { jidar: 0; padding: 0; } #div1 { limpahan: tersembunyi; lebar: 712px; Tinggi: 108px; jidar: 100px auto; jawatan: relatif; latar belakang: merah; } #div1 ul { jawatan: mutlak; kiri: 0; atas: 0; } #div1 ul li { terapung: kiri; lebar: 178px; Tinggi: 108px; gaya senarai: tiada; }

Salin kod Kod adalah seperti berikut: Ke kiri Ke kanan ... & Lt; img src = "IMG/menatal lancar /1.jpg"/& gt; ... ... & Lt; img src = "IMG/menatal lancar /2.jpg"/& gt; ... ... & Lt; img src = "IMG/gulungan lancar/3.jpg"/& gt; ... ... & Lt; img src = "IMG/gulungan lancar /4.jpg"/& gt; ... ...

Di atas ialah reka letak yang mudah, dan berikut ialah kod Javascript utama

Salin kod

Kod adalah seperti berikut: window.onload = function() { var oDiv = document.getElementById("div1"); var oUl = oDiv.getElementsByTagName('ul')[0]; var aLi = oUl.getElementsByTagName('li'); kelajuan var = 2; oUl.innerHTML = oUl.innerHTML; oUl.style.width = aLi[0].offsetWidth * aLi.length 'px'; function move() { jika (oUl.offsetLeft oUl.style.left = '0'; } jika (oUl.offsetLeft > 0) { oUl.style.left = -oUl.offsetWidth / 2 'px'; } oUl.style.left = oUl.offsetKelajuan kiri 'px'; } var timer = setInterval(move, 30); oDiv.onmouseover = function() { clearInterval(pemasa); }; oDiv.onmouseout = function() { pemasa = setInterval(move, 30); }; document.getElementsByTagName('a')[0].onclick = function() { kelajuan = -2; }; document.getElementsByTagName('a')[1].onclick = function() { kelajuan = 2; }; } 简单讲下思路：

首先设置ul 里面的图片一共有8张 oUl.innerHTML = oUl.innerHTML;

在 计算ul的宽度为 li的实际宽度*8

之后将 多余的内容隐藏

注意 ： oUl.offsetLeft 肯定是负值

所以判断的时候不要把负号漏掉

复制代码 代码如下: jika (oUl.offsetLeft oUl.style.left = '0'; }

Perenggan ini bermakna bahawa gambar telah ditatal separuh ke bawah, cepat tarik gambar itu ke belakang, kerana program dijalankan terlalu cepat, jadi hampir tidak dapat dilihat untuk mencapai penatalan lancar

Akhir sekali, gunakan kelajuan berubah untuk mengawal tatal ke arah kiri dan kanan.

Kod di atas hanya melaksanakan fungsi paling asas, dan rakan boleh terus menambah baik berdasarkan ini.