Utilisez Javascript pour obtenir facilement un défilement transparent des compétences images_javascript

L'effet de défilement transparent de js peut être vu sur presque toutes les pages Web. Certains peuvent utiliser des plug-ins. En fait, il est relativement simple d'utiliser le javascript original.

L'essentiel est d'utiliser les connaissances de position js.

1.innerHTML : Définir ou obtenir la balise html de l'élément

2.scrollLeft : Définissez ou obtenez la distance entre le bord gauche de l'objet et l'extrémité la plus à gauche du contenu actuellement visible dans la fenêtre

3.offsetWidth : Définir ou obtenir la largeur de l'étiquette spécifiée

4.setInterval() : Définissez la méthode pour qu'elle démarre régulièrement

5.clearInterval(); effacer la minuterie

Rendu :

Aperçu : démo

Copier le code Le code est le suivant :

   
   



   

       

图片滚动制作

       

---

   

     

       

         

           
• 

           
• 

           
• 

           
• 
     
         

         

         

       

     

     

        prev
     

     

        next
     

    
   

   

<script><br> var wrap=document.getElementById('wrap');<br> var list1=document.getElementById('list1');<br> var list2=document.getElementById('list2');<br> var prev=document.getElementById('prev');<br> var next=document.getElementById('next');<br> //Créer une copie de la liste de contenu<br> list2.innerHTML=list1.innerHTML;<br> //Faites défiler vers la gauche<br> fonction scroll(){<br> Si(wrap.scrollLeft>=list2.offsetWidth){<br>         wrap.scrollLeft=0;<br> ><br> autre{<br>         wrap.scrollLeft ;<br> ><br> ><br> Minuterie = setInterval(scroll,1);<br> //Utilisez clearInterval()<br> lorsque la souris reste wrap.onmouseover=function(){<br> ClearInterval(minuterie);<br> ><br> wrap.onmouseout=function(){<br> Minuterie = setInterval(scroll,1);<br> ><br> //Accélérer vers la gauche<br> fonction scroll_l(){<br> Si(wrap.scrollLeft>=list2.offsetWidth){<br>         wrap.scrollLeft=0;<br> ><br> autre{<br>         wrap.scrollLeft ;<br> ><br> ><br> //Faites défiler vers la droite <br> fonction scroll_r(){<br> Si(wrap.scrollLeft<=0){<br />         wrap.scrollLeft =list2.offsetWidth;<br /> ><br /> autre{<br />         wrap.scrollLeft--;<br /> ><br /> }  <br /> prev.onclick=function(){<br /> ClearInterval(minuterie);<br /> Changer(0)<br /> ><br /> suivant.onclick=function(){<br /> ClearInterval(minuterie);<br /> Changement(1)<br /> ><br /> changement de fonction(r){<br /> Si(r==0){<br />        timer = setInterval(scroll_l,60);<br />          wrap.onmouseout = function(){<br />         timer = setInterval(scroll_l,60);<br /> ><br /> ><br /> Si(r==1){<br />        timer = setInterval(scroll_r,60);<br />          wrap.onmouseout = function(){<br />         timer = setInterval(scroll_r,60);<br /> ><br /> } <br /> } <br /> </script>

Un code très concis et pratique, les amis peuvent simplement l'embellir de manière appropriée en fonction des besoins de leur propre projet.