Gunakan Javascript untuk mencapai kemahiran menatal images_javascript yang lancar

Kesan tatal lancar js boleh dilihat pada hampir mana-mana halaman web Sesetengah mungkin menggunakan pemalam, sebenarnya, ia agak mudah untuk menggunakan javascript asal.

Perkara utama adalah menggunakan pengetahuan kedudukan js.

1.innerHTML: Tetapkan atau dapatkan teg html elemen

2.scrollLeft: Tetapkan atau dapatkan jarak antara tepi kiri objek dan hujung paling kiri kandungan yang boleh dilihat pada masa ini dalam tetingkap

3.offsetWidth: Tetapkan atau dapatkan lebar label yang ditentukan

4.setInterval(): Tetapkan kaedah untuk bermula dengan kerap

5.clearInterval(); pemasa jelas

Rendering:

Intai sebentar: tunjuk cara

Salin kod Kod adalah seperti berikut:

   
   



   

       

图片滚动制作

       

---

   

     

       

         

           
• 

           
• 

           
• 

           
• 
     
         

         

         

       

     

     

        prev
     

     

        next
     

    
   

   

var wrap=document.getElementById('wrap');
var list1=document.getElementById('list1');
var list2=document.getElementById('list2');
var prev=document.getElementById('prev');
var next=document.getElementById('next');
//Buat salinan senarai kandungan
list2.innerHTML=list1.innerHTML;
//Tatal ke kiri
tatal fungsi(){
If(wrap.scrollLeft>=list2.offsetWidth){
        wrap.scrollLeft=0;
}
lain{
        wrap.scroll Kiri ;
}
}
Pemasa = setInterval(skrol,1);
//Gunakan clearInterval()
apabila tetikus kekal wrap.onmouseover=function(){
ClearInterval(pemasa);
}
wrap.onmouseout=function(){
Pemasa = setInterval(skrol,1);
}
//Pecut ke kiri
fungsi tatal_l(){
If(wrap.scrollLeft>=list2.offsetWidth){
        wrap.scrollLeft=0;
}
lain{
        wrap.scroll Kiri ;
}
}
//Tatal ke kanan
fungsi tatal_r(){
If(wrap.scrollLeft<=0){
        wrap.scrollLeft =list2.offsetWidth;
}
lain{
        wrap.scrollKiri--;
}
}  
prev.onclick=function(){
ClearInterval(pemasa);
Tukar(0)
}
next.onclick=function(){
ClearInterval(pemasa);
Tukar(1)
}
perubahan fungsi(r){
Jika(r==0){
       pemasa = setInterval(scroll_l,60);
         wrap.onmouseout = function(){
        pemasa = setInterval(scroll_l,60);
}
}
Jika(r==1){
       pemasa = setInterval(scroll_r,60);
         wrap.onmouseout = function(){
        pemasa = setInterval(scroll_r,60);
}
}
}

Kod yang sangat ringkas dan praktikal, rakan-rakan hanya boleh mencantikkannya dengan sewajarnya mengikut keperluan projek mereka sendiri.