Heim > Web-Frontend > js-Tutorial > Verwenden Sie Javascript, um auf einfache Weise ein nahtloses Scrollen von Bildern zu erreichen. Javascript-Kenntnisse

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

WBOY
Freigeben: 2016-05-16 16:29:00
Original
1636 Leute haben es durchsucht

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:




   
    javascript scroll制作



   

       

图片滚动制作


       

   

     

       

         

               

  •            

  •            

  •            
  •      
             

         

             

       

     

     
          
   

   

<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.

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage