如何使此滑塊自動播放圖像而不是單擊

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函數的參數是您要執行的函數以及執行該函數的頻率（以毫秒為單位）。

例如

var timer = setInterval(functionName,1000);