Verwenden Sie Javascript, um auf einfache Weise ein nahtloses Scrollen von Bildern zu erreichen. Javascript-Kenntnisse

Der nahtlose Scrolleffekt von js ist auf fast jeder Webseite zu sehen. Einige verwenden möglicherweise Plug-Ins. Tatsächlich ist die Verwendung von Original-Javascript relativ einfach.

Die Hauptsache ist, js Positionswissen zu nutzen.

1.innerHTML: Legen Sie das HTML-Tag des Elements

fest oder rufen Sie es ab

2.scrollLeft: Legen Sie den Abstand zwischen dem linken Rand des Objekts und dem äußersten linken Ende des aktuell sichtbaren Inhalts im Fenster fest oder rufen Sie ihn ab

3.offsetWidth: Legen Sie die Breite des angegebenen Etiketts fest oder rufen Sie sie ab

4.setInterval(): Legen Sie die Methode so fest, dass sie regelmäßig startet

5.clearInterval(); Timer löschen

Rendering:

Vorgeschmack: Demo

Code kopieren Der Code lautet wie folgt:

   
   



   

       

图片滚动制作

       

---

   

     

       

         

           
• 

           
• 

           
• 

           
• 
     
         

         

         

       

     

     

        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> //Eine Kopie der Inhaltsliste erstellen<br> list2.innerHTML=list1.innerHTML;<br> //Nach links scrollen<br> Funktion scroll(){<br> If(wrap.scrollLeft>=list2.offsetWidth){<br>         wrap.scrollLeft=0;<br> }<br> sonst{<br>         wrap.scrollLeft ;<br> }<br> }<br> Timer = setInterval(scroll,1);<br> //Verwenden Sie clearInterval()<br>, wenn die Maus bleibt wrap.onmouseover=function(){<br> ClearInterval(timer);<br> }<br> wrap.onmouseout=function(){<br> Timer = setInterval(scroll,1);<br> }<br> //Nach links beschleunigen<br> Funktion scroll_l(){<br> If(wrap.scrollLeft>=list2.offsetWidth){<br>         wrap.scrollLeft=0;<br> }<br> sonst{<br>         wrap.scrollLeft ;<br> }<br> }<br> //Nach rechts scrollen <br> Funktion scroll_r(){<br> If(wrap.scrollLeft<=0){<br />         wrap.scrollLeft =list2.offsetWidth;<br /> }<br /> sonst{<br />         wrap.scrollLeft--;<br /> }<br /> }  <br /> prev.onclick=function(){<br /> ClearInterval(timer);<br /> Ändern(0)<br /> }<br /> next.onclick=function(){<br /> ClearInterval(timer);<br /> Ändern(1)<br /> }<br /> Funktionsänderung(r){<br /> If(r==0){<br />        timer = setInterval(scroll_l,60);<br />          wrap.onmouseout = function(){<br />         timer = setInterval(scroll_l,60);<br /> }<br /> }<br /> If(r==1){<br />        timer = setInterval(scroll_r,60);<br />          wrap.onmouseout = function(){<br />         timer = setInterval(scroll_r,60);<br /> }<br /> } <br /> } <br /> </script>

Ein sehr prägnanter und praktischer Code, Freunde können ihn entsprechend ihren eigenen Projektanforderungen entsprechend verschönern.