bu kaydırıcıyı görüntülerin yerine otomatik olarak tıklatmak yerine

Question

Bu sürgüden istediğim her şeyi yapabildiğim ancak görüntüleri otomatik olarak nasıl oynayacağını anlayamıyorum. Otomatik olarak oynayabilmek ve ilerlemek için tıklamak istiyorum, ancak bu işlevleri mümkün kılmak için JavaScript hakkında yeterli bilgim yok.

Yardımlarınız için şimdiden teşekkür ederiz.

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

kullanın setInterval fonksiyonu. Bir sonraki görüntüye gitmek için kullandığınız kodu kendi işlevine taşıyın ve sonra bu işlevi setInterval ile çağırın.

SetInterval işlevinin parametreleri, yürütmek istediğiniz işlevdir ve işlevi ne sıklıkla çalıştırmak istediğiniz milisaniye cinsinden ifade edilir.

Ex.

var timer = setInterval(functionName,1000);