Wie man diesen Schieberegler autoplay die Bilder machen anstatt klicken

Question

Ich konnte diesen Schieberegler machen alles tun, was ich wollte, aber ich kann nicht herausfinden, wie man es automatisch die Bilder zu machen. Ich möchte in der Lage sein, automatisch zu spielen und zu klicken, um fortzufahren, aber ich weiß einfach nicht genug über JavaScript, um diese Funktionen zu ermöglichen.

Vielen Dank im Voraus für Ihre Hilfe.

HTML

<div id="image-area"> 
     <div class="img-area-wrapper"> 
     <img src="http://www.socwall.com/images/wallpapers/57751-1920x1080.jpg" class="actual-img"> 
     </div> 
    </div> 

    <div id="image-area2"> 
     <div class="img-area-wrapper"> 
     <img src="http://www.socwall.com/images/wallpapers/38075-1920x1200.jpg" class="actual-img"> 
     </div> 
    </div> 

    <div id="image-area3"> 
     <div class="img-area-wrapper"> 
     <img src="http://www.socwall.com/images/wallpapers/37436-1500x1000.jpg" class="actual-img"> 
     </div> 
    </div> 

    <div class="slider-buttons"> 
     <div class="slider-buttons-container"> 
     <a href="image-area" class="o-links">&nbsp;</a> 
     <a href="image-area2" class="o-links">&nbsp;</a> 
     <a href="image-area3" class="o-links">&nbsp;</a> 
     </div> 
    </div> 

    </div> 
</section> 

CSS

#image-slider-container { 

width: 100%; 
height: auto; 
background-color: #ffffff; 
padding: 5% 0px 0% 0px; 

} 

.image-slider-inner { 

width: 100%; 
height: auto;  
max-width: 1040px; 
margin: 0px auto; 
padding: 0px 20px 0px 20px; 

} 

#image-area2, 
#image-area3 { 

width: 100%; 
height: auto; 
display: none; 

} 

#image-area { 

width: 100%; 
height: auto; 

} 

#image-area .img-area-wrapper { 

width: 80%; 
height: auto;  
max-width: 1140px; 
margin: 0px auto; 

} 

.actual-img { 

width: 100%; 
height: 100%; 

} 

.slider-buttons { 

width: 100%; 
height: auto; 
max-width: 1140px; 
margin-top: 0px; 

} 

.slider-buttons-container { 

width: 100%; 
height: auto; 
max-width: 1140px; 
margin: 10px auto 0px auto; 
text-align: center; 

} 

.slider-buttons-container a { 

border-radius: 360px; 
border: 1px #C5C5C5 solid; 
padding: 0px 5px 0px 5px; 
margin: 0px 5px 0px 5px; 
background-color: #efefef; 
outline: 0px; 
text-decoration: none; 
font-size: 12px; 
box-shadow: -2px 1px 2px 0px #ADADAD; 

transition: 0.5s; 
-moz-transition: 0.5s; 
-webkit-transition: 0.5s; 
-o-transition: 0.5s; 

} 


.slider-buttons-container a:hover { 

border: 1px #C5C5C5 solid; 
padding: 0px 5px 0px 5px; 
background-color: #DAD8D8 

} 

.slider-buttons-container a:active { 

position: relative; 
top: 2px; 

} 

.O_Nav_Current { 

border: 1px #999999 solid !important; 
background-color: #DAD8D8 !important; 

} 

JS

$(document).ready(function() { 

    //loads default content 
    //$('#image-area').load($('.menu_top a:first-child').attr('href')); 

    $('.o-links').click(function() { 

     // href has to be the id of the hidden content element 
     var href = $(this).attr('href'); 
     $('#image-area').fadeOut(1000, function() { 
      $(this).html($('#' + href).html()).fadeIn(1000); 
     }); 
     return false; 
    }); 

    }); 

    $(function() { 
     $('.o-links').click(function(e) { 

      //e.preventDefault(); 

      $('.o-links').not(this).removeClass('O_Nav_Current'); 
      $(this).addClass('O_Nav_Current'); 
     }); 
    }); 

Answer 1

Verwenden Sie die setInterval-Funktion. Verschieben Sie den Code, den Sie verwenden, um zum nächsten Bild zu gelangen, in eine eigene Funktion und rufen Sie diese Funktion dann mit setInterval auf.

Die Parameter der setInterval-Funktion sind die Funktion, die Sie ausführen möchten und wie oft Sie die Funktion ausführen möchten, in Millisekunden.

Ex.

var timer = setInterval(functionName,1000);