Rumah > hujung hadapan web > tutorial js > Gunakan Javascript untuk mencapai kemahiran menatal images_javascript yang lancar

Gunakan Javascript untuk mencapai kemahiran menatal images_javascript yang lancar

WBOY
Lepaskan: 2016-05-16 16:29:00
asal
1625 orang telah melayarinya

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:




   
    javascript scroll制作



   

       

图片滚动制作


       

   

     

       

         

               

  •            

  •            

  •            
  •      
             

         

             

       

     

     
          
   

   


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.

Label berkaitan:
sumber:php.cn
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan