自动播放基本jQuery滑块的功能？

Question

我想补充的自动播放功能，可以自动旋转，每4秒左右的幻灯片，并想知道我怎么会去加入该功能，以我目前的滑块（下面的代码）：

UPDATE加入当前的代码有滑块自动旋转和正确的方向，但导航箭头不再工作。

谢谢！

HTML：

<div id='top_slider' > 
    <div id='container' > 
     <?php $dots=0;$posts=query_posts('category_name=slider-feature'); 
     if (have_posts()): while (have_posts()) : the_post(); ?> 
      <?php if (get_post_meta($post->ID, 'slider_vimeo_id', true)!==""): ?> 
       <div style="left: 0%;" class="slide"> 
        <iframe src="http://player.vimeo.com/video/<?php echo get_post_meta($post->ID, 'slider_vimeo_id', true); ?>" width="960" height="540" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe> 
       </div> 
      <?php else: ?> 
       <div style="left: 100%;" class="slide"> 
        <a href='<?php echo get_post_meta($post->ID, 'slider_link_url', true); ?>'><img class="fullscreen_img" src="<?php echo get_post_meta($post->ID, 'slider_image_url', true); ?>"></a> 
       </div> 
    </div> 

    <div id='slider_nav' class='inline-block'> 
     <div id='center'> 
      <div class="arrow_left element hot_img" onclick="slide('right')"></div> 

      <?php for ($i=0; $i<$dots; $i++) { ?> 
       <div class="dot element hot_img" onclick="slide(<?php echo $i ?>)"></div> 
      <?php } ?> 
       <div class="arrow_right element hot_img" onclick="slide('left')"></div> 
     </div> 
    </div>   
</div> 

的Javascript：

function slide(dir) { 
    if (slideInProgress != 0) { 
     return; 
    } 
    slideInProgress = 3; 
    var current, next, nextSlide; 
    current = jQuery(slides[currentSlideIndex]); 
    if (!isNaN(dir)) { 
     next = dir; 
     if (next > currentSlideIndex) 
      dir = 'left'; 
     else 
      dir = 'right'; 
    } 
    ; 
    if (dir == 'left') { 
     if (!next) { 
      next = currentSlideIndex + 1; 
      if (next >= slides.length) { 
       next = 0; 
      } 
     } 
     nextSlide = jQuery(slides[next]); 
     nextSlide.css('left', '100%'); 
     nextSlide.css('z-index', parseInt(current.css('z-index'), 10) + 1); 
     //nextSlide.animate({left: '0%'}, 1500); 
     nextSlide.animate({ 
      left: '0%' 
     }, { 
      duration: 1500, 
      complete: function() { 
       slideInProgress--; 
      } 
     }); 
     //current.animate({left: '-100%'}, 1500); 
     current.animate({ 
      left: '-100%' 
     }, { 
      duration: 1500, 
      complete: function() { 
       slideInProgress--; 
      } 
     }); 

    } else { 
     console.log('moving right'); 
     if (!next) { 
      next = currentSlideIndex - 1; 
      if (next < 0) { 
       next = slides.length - 1; 
      } 
     } 
     nextSlide = jQuery(slides[next]); 
     nextSlide.css('left', '-100%'); 
     nextSlide.css('z-index', parseInt(current.css('z-index'), 10) + 1); 
     //nextSlide.animate({left: '0%'}, 1500); 
     nextSlide.animate({ 
      left: '0%' 
     }, { 
      duration: 1500, 
      complete: function() { 
       slideInProgress--; 
      } 
     }); 
     //current.animate({left: '100%'}, 1500); 
     current.animate({ 
      left: '100%' 
     }, { 
      duration: 1500, 
      complete: function() { 
       slideInProgress--; 
      } 
     }); 

    } 
    current.addClass('active'); 
    nextSlide.removeClass('active'); 
    var el = jQuery('.dot:eq(' + currentSlideIndex + ')'); 
    src = el.css("background-image").replace("_over", "_off"); 
    el.css("background-image", src); 
    el.removeClass('active'); 
    el = jQuery('.dot:eq(' + next + ')'); 
    src = el.css("background-image").replace("_off", "_over"); 
    el.css("background-image", src); 
    el.addClass('active'); 
    console.log('currentSlideIndex' + currentSlideIndex); 
    console.log('next' + next); 
    console.log('dir' + dir); 
    currentSlideIndex = next; 
    // **** // 
    slideInProgress--; 
    // **** // 
} 

setInterval(function() {slide('left')}, 6000); 

Answer 1

移动幻灯片功能出的setInterval并调用该函数与它。这样在你的元素的onclick属性调用该函数将工作太：

function slide(dir) { 
//the content of function 
} 

setInterval(function(){ slide(dir); }, 4000);