Добавить автовоспроизведение в существующий слайдер изображений

Question

Я использую слайдер изображения для веб-сайта, который я создаю, но у него нет функции автоматического воспроизведения. Можете ли вы добавить к нему пользовательскую функцию автозапуска с помощью jQuery? Исходный код ниже.

Slider Просмотр

Aspx Page

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> 
    <script src="JS/jquery.cycle.all.js"></script> 
    <link href="CSS/style.css" rel="stylesheet" /> 
    <script> 
     $(document).ready(function() { 
      $('#slider1').cycle({ 
       fx: 'scrollHorz', 
       speed: 'slow', 
       timeout: 0, 
       next: '#next', 
       prev: '#prev', 
       pager: '#thumb', 
       pagerAnchorBuilder: function (idx, slide) { 
        return '<li><a href="#"><img src="' + slide.src + '" width="60" height="60" /></a></li>'; 
       } 
      }); 
     }); 

    </script> 

    <section> 
     <div class="container"> 

      <div class="slider"> 
       <div id="slider1"> 
        <img border="0" src="Slider/B50.JPG" width="850" height="637" /> 
        <img border="0" src="Slider/B51.JPG" width="850" height="637" /> 
        <img border="0" src="Slider/C47.JPG" width="850" height="637" /> 
        <img border="0" src="Slider/C43.JPG" width="850" height="637" /> 
        <img border="0" src="Slider/E2.JPG" width="850" height="637" /> 
        <img border="0" src="Slider/W5.JPG" width="850" height="637" /> 
        <img border="0" src="Slider/M21.JPG" width="850" height="637" /> 
       </div> 
       <ul id="thumb"></ul> 
       <div id='next' class="slider_next"> 
        <img border="0" src="Images/next.png" width="57" height="57" alt="next image" /></div> 
       <div id='prev' class="slider_prev"> 
        <img border="0" src="Images/prev.png" width="57" height="57" alt="previous image" /></div> 
      </div> 
     </div> 
    </section> 

Стиль

.slider { 
    margin: 0 auto; 
    width: 850px; 
    height: 637px; 
    border: 8px solid #FFFFFF; 
    border-radius: 5px; 
    box-shadow: 2px 2px 4px #333333; 
    position: relative; 
} 

.slider_next { 
    width: 62px; 
    height: 62px; 
    background: #f8f8f8; 
    border-radius: 70px; 
    position: absolute; 
    z-index: 99; 
    top: 287px; 
    left: 820px; 
    padding: 5px 0 0 5px; 
    cursor: pointer; 
} 

.slider_prev { 
    width: 62px; 
    height: 62px; 
    background: #f8f8f8; 
    border-radius: 70px; 
    position: absolute; 
    z-index: 99; 
    top: 287px; 
    left: -35px; 
    padding: 5px 0 0 5px; 
    cursor: pointer; 
} 

#thumb { 
    width: 100%; 
    height: 80px; 
    margin: 20px 14%; 
} 

    #thumb li { 
     width: 60px; 
     float: left; 
     margin: 12px; 
     list-style: none; 
    } 

    #thumb a { 
     width: 60px; 
     padding: 3px; 
     display: block; 
     border: 3px solid #FFFFFF; 
     border-radius: 3px; 
     box-shadow: 1px 1px 3px #333333; 
    } 

    #thumb li.activeSlide a { 
     border: 3px solid #0a526f; 
     border-radius: 3px; 
     box-shadow: 1px 1px 3px #333333; 
    } 

    #thumb a:focus { 
     outline: none; 
    } 

    #thumb img { 
     border: none; 
     display: block; 
    } 

Answer 1

попробуйте добавить это. Это изменит слайд каждые 2 секунды

function changeSlide(){ 
    $('#next').trigger('click'); 
    setTimeout(changeSlide,2000); 
} 

setTimeout(changeSlide,2000); 

поэтому окончательный код будет выглядеть

$(document).ready(function() { 
    $('#slider1').cycle({ 
     fx: 'scrollHorz', 
     speed: 'slow', 
     timeout: 0, 
     next: '#next', 
     prev: '#prev', 
     pager: '#thumb', 
     pagerAnchorBuilder: function (idx, slide) { 
      return '<li><a href="#"><img src="' + slide.src + '" width="60" height="60" /></a></li>'; 
     } 
    }); 

    function changeSlide(){ 
     $('#next').trigger('click'); 
     setTimeout(changeSlide,2000); 
    } 

    setTimeout(changeSlide,2000); 

});