如何使这个滑块自动播放图像，而不是点击

Question

我已经能够使这个滑块做我想要的一切，但我无法弄清楚如何使它自动播放图像。我希望能够自动播放并点击推进，但我只是不太了解JavaScript以使这些功能成为可能。

非常感谢您的帮助。

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

使用setInterval功能。将用于转到下一个图像的代码移到它自己的函数中，然后用setInterval调用该函数。

setInterval函数的参数是要执行的函数以及您希望执行该函数的频率（以毫秒为单位）。

Ex。

var timer = setInterval(functionName,1000);