2016-03-28 3 views
0

Ich habe gerade ein Div für meine Diashow erstellt. Unten habe ich ein Skript, um diese Diashow mit den nächsten und vorherigen Pfeilen ausführbar zu machen. Ich möchte die gleiche Folie zur Arbeit Auto-Diashow und beim Hover stoppen stoppen.
kann mir jemand helfen, wie mache ich das? als ich Anfänger binWie mache ich Slideshow, die während Lade starten und auf Hover stoppen stoppen

<div id="slideshow"> 
       <a href="#" class="slideshow-prev">&laquo;</a> 
       <ul> 
        <li><img src="images/1.jpg" alt="photo1" /></li> 
        <li><img src="images/2.jpg" alt="photo2" /></li> 
        <li><img src="images/3.jpg" alt="photo3" /></li> 
        <li><img src="images/4.jpg" alt="photo4" /></li> 
        <li><img src="images/5.jpg" alt="photo5" /></li> 
       </ul> 
       <a href="#" class="slideshow-next">&raquo;</a> 
      </div> 
       <script> 

       //an image width in pixels 
       var imageWidth = $('#slideshow ul li').width(); 


       //DOM and all content is loaded 
       $(window).ready(function() { 

        var currentImage = 0; 

        //set image count 
        var allImages = $('#slideshow li img').length; 

        //setup slideshow frame width 
        $('#slideshow ul').width(allImages*imageWidth); 

        //attach click event to slideshow buttons 
        $('.slideshow-next').click(function(){ 

         //increase image counter 
         currentImage++; 
         //if we are at the end let set it to 0 
         if(currentImage>=allImages) currentImage = 0; 
         //calcualte and set position 
         setFramePosition(currentImage); 

        }); 

        $('.slideshow-prev').click(function(){ 

         //decrease image counter 
         currentImage--; 
         //if we are at the end let set it to 0 
         if(currentImage<0) currentImage = allImages-1; 
         //calcualte and set position 
         setFramePosition(currentImage); 

        }); 

       }); 

       //calculate the slideshow frame position and animate it to the new position 
       function setFramePosition(pos){ 

        //calculate position 
        var px = imageWidth*pos*-1; 
        //set ul left position 
        $('#slideshow ul').animate({ 
         left: px 
        }, 300); 
       } 
      </script> 

Ich habe gerade ein div für meine Diashow erstellt. Unten habe ich ein Skript, um diese Diashow mit den nächsten und vorherigen Pfeilen ausführbar zu machen. Ich möchte die gleiche Folie zur Arbeit Auto-Diashow und beim Hover stoppen stoppen. Jeder kann mir helfen, wie mache ich? wie ich Anfänger Wenn möglich auf diese bin, kann mir jemand bitte geben Sie mit einem JavaScript-Code, der innerhalb automatisch die Diaschau

+1

prüfen dieses Beispiel wie man bei Hover pausiert: http://tobia.github.io/Pause/ – Narxx

Antwort

0

Verwenden Sie den folgenden Code erwähnt von Script-Tag spielen:

var time; 
$(window).load(function(){ 
time = setInterval(function(){ 
    $('.slideshow-next').trigger('click'); 
    },5000); 

$('#slideshow').hover(function(){ 
    clearInterval(time); 
},function(){ 
    time = setInterval(function(){ 
     $('.slideshow-next').trigger('click'); 
     },5000); 
    }); 
}); 
+0

danke es funktioniert gut – Kash