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: <br> * {<br> jidar: 0;<br> padding: 0;<br> }<br> #div1 {<br> limpahan: tersembunyi;<br> lebar: 712px;<br> Tinggi: 108px;<br> jidar: 100px auto;<br> jawatan: relatif;<br> latar belakang: merah;<br> }<br> #div1 ul {<br> jawatan: mutlak;<br> kiri: 0;<br> atas: 0;<br> }<br> #div1 ul li {<br> terapung: kiri;<br> lebar: 178px;<br> Tinggi: 108px;<br> gaya senarai: tiada;<br> }<br> <br> </div> <p></p> <div class="codetitle"> <span><a style="CURSOR: pointer" data="31087" class="copybut" id="copybut31087" onclick="doCopy('code31087')">Salin kod<u></u></a> Kod adalah seperti berikut:</span><div class="codebody" id="code31087"> <br> <badan><br> <a href="javascript:;">Ke kiri</a><br> <a href="javascript:;">Ke kanan</a><br> <div id="div1"><br> ... & 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; ... ... </body><br> <br><br> <br>Di atas ialah reka letak yang mudah, dan berikut ialah kod Javascript utama<br> <br><br><br><br><br>Salin kod<br><br><br> Kod adalah seperti berikut:<br><div class="codebody" id="code9061"> <br> <script type="text/javascript"><br> window.onload = function() {<br> var oDiv = document.getElementById("div1");<br> var oUl = oDiv.getElementsByTagName('ul')[0];<br> var aLi = oUl.getElementsByTagName('li');<br> kelajuan var = 2; <br> oUl.innerHTML = oUl.innerHTML;<br> oUl.style.width = aLi[0].offsetWidth * aLi.length 'px';<br> function move() {<br> jika (oUl.offsetLeft < -oUl.offsetWidth / 2) {<br /> oUl.style.left = '0';<br /> }<br /> jika (oUl.offsetLeft > 0) {<br> oUl.style.left = -oUl.offsetWidth / 2 'px';<br> }<br> oUl.style.left = oUl.offsetKelajuan kiri 'px';<br> }<br> var timer = setInterval(move, 30);<br> oDiv.onmouseover = function() {<br> clearInterval(pemasa);<br> };<br> oDiv.onmouseout = function() {<br> pemasa = setInterval(move, 30);<br> };<br> document.getElementsByTagName('a')[0].onclick = function() {<br> kelajuan = -2;<br> };<br> document.getElementsByTagName('a')[1].onclick = function() {<br> kelajuan = 2;<br> };<br> }<br> </skrip><br> </div> <p>简单讲下思路：</p> <p>首先设置ul 里面的图片一共有8张 oUl.innerHTML = oUl.innerHTML;</p> <p>在 计算ul的宽度为 li的实际宽度*8</p> <p>之后将 多余的内容隐藏</p> <p>注意 ： oUl.offsetLeft 肯定是负值</p> <p>所以判断的时候不要把负号漏掉</p> <p></p> <div class="codetitle"> <span><a style="CURSOR: pointer" data="48582" class="copybut" id="copybut48582" onclick="doCopy('code48582')"><u>复制代码</u></a></span> 代码如下:</div> <div class="codebody" id="code48582"> <br> jika (oUl.offsetLeft < -oUl.offsetWidth / 2) { <br> oUl.style.left = '0'; }<p> <br></p> </div> 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<p> </p>Akhir sekali, gunakan kelajuan berubah untuk mengawal tatal ke arah kiri dan kanan. <p> </p>Kod di atas hanya melaksanakan fungsi paling asas, dan rakan boleh terus menambah baik berdasarkan ini. <p></p> </div> </div>
