jQuery幻灯片

Question

我正在尝试制作一个jquery幻灯片，幻灯片放映有.click功能，所以基本上如果我点击箭头它会带我到下一张幻灯片或者前一张幻灯片，但我需要让它自动滑动如果没有人点击，所以我只是想知道我是否可以使用if语句，所以看看它是否单击移动到下一张幻灯片，如果不是在5秒内自动完成，

感谢您的帮助

// Create event listeners for .controls clicks
  jQuery('.control')
    .bind('click', function(){
    // Determine new position
      currentPosition = (jQuery(this).attr('id')=='right_arrow')
    ? currentPosition+1 : currentPosition-1;

      // Hide / show controls
      manageControls(currentPosition);
      // Move slideInner using margin-left

      jQuery('#slideInner').animate({
        'marginLeft' : slideWidth*(-currentPosition)
      });
    });

    var interval = setInterval(function() {

    // Move slideInner using margin-left
    jQuery('#slideInner').animate({
        'marginLeft' : slideWidth*(-currentPosition)
      });   
  },5000);

    currentPosition = currentPosition + 1;

    //clear the interval
    clear();

  function clear() {
    if(position==numberOfSlides-1) {
        clearInterval(interval);    
    }
   }

  // manageControls: Hides and shows controls depending on currentPosition
  function manageControls(position){
    // Hide left arrow if position is first slide
    if(position==0){ jQuery('#left_arrow').hide() }
    else{ jQuery('#left_arrow').show() }
    // Hide right arrow if position is last slide
    if(position==numberOfSlides-1){ jQuery('#right_arrow').hide() }
    else{ jQuery('#right_arrow').show() }
    }
  });

Answer 1

你使用计时器来做这类事情。

示例：

var doSlide = function(){
   //code here...
}
myTimer = setTimeout(doSlide,5000);
$('#leftarrow').add('#rightarrow').click(function(){
    //stop the timer from counting
    clearTimeout(myTimer);
    //go to the next or prev slide
    doSlide();
}

通过这样做，一旦用户点击其中一个箭头，它将滑动一次并自动停止滑动，并允许用户阅读（或看到？）他所到达的幻灯片中的任何内容。

顺便说一下：要使用jQuery选择元素，您可以使用别名$，如我的示例所示。