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

我已经能够让这个滑块做我想做的一切，但我不知道如何让它自动播放图像。我希望能够自动播放和点击以前进，但我对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');
      });
  });