このスライダーをクリックするのではなく、画像を自動再生する方法

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);