jQuery滑块，当鼠标悬停时如何暂停自动播放? [英] jQuery slider, how can I pause the autoplay when mouse over?

问题描述

伙计们，我不擅长编码，这个小脚本真的很困扰我.我有一个带有自动播放功能的滑块，效果很好.但是我需要有人帮我在鼠标悬停时暂停自动播放.另外，有人可以找到一种方法在到达最后一张幻灯片时播放第一张幻灯片，而不是回滚到第一张幻灯片吗?太感谢了.这是代码:

Guys, I'm not good on coding, and this little script are really bother me a lot. I have a slider with autoplay, which is works fine. But I need somebody help me to pause the autoplay when mouse over. Also, can somebody find a way to play the 1st slide when it reaches the last slide, instead of roll back to the 1st slide? Thank you so much. And here are the code:

    $(document).ready(function(){
      var currentPosition = 0;
      var slideWidth = 560;
      var slides = $('.slide');
      var numberOfSlides = slides.length;

      // --- autoshow ---------
      function autoshow(){
      //alert('start');
        currentPosition = currentPosition+1 ;
        if(currentPosition==numberOfSlides){
        currentPosition=0;
      }
      // Hide / show controls
      manageControls(currentPosition);
      // Move slideInner using margin-left
      $('#slideInner').animate({
        'marginLeft' : slideWidth*(-currentPosition)
      });
      timeOut = setTimeout(autoshow, 3000);
      }
      timeOut = setTimeout(autoshow, 3000);
      // ----autoshow -----------

      // Remove scrollbar in JS
      $('#slidesContainer').css('overflow', 'hidden');

      // Wrap all .slides with #slideInner div
      slides
        .wrapAll('<div id="slideInner"></div>')
        // Float left to display horizontally, readjust .slides width
        .css({
          'float' : 'left',
          'width' : slideWidth
        });

      // Set #slideInner width equal to total width of all slides
      $('#slideInner').css('width', slideWidth * numberOfSlides);

      // Insert controls in the DOM
      $('#slideshow')
        .prepend('<span class="control" id="leftControl">Clicking moves left</span>')
        .append('<span class="control" id="rightControl">Clicking moves right</span>');

      // Hide left arrow control on first load
      manageControls(currentPosition);

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

        // Hide / show controls
        manageControls(currentPosition);
        // Move slideInner using margin-left
        $('#slideInner').animate({
          'marginLeft' : slideWidth*(-currentPosition)
        });
      });

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

推荐答案

我也不是专家，所以这个答案可能是错误的，但你有没有尝试过使用 .hover 函数，它可能看起来像这样.

I'm no expert either so this answer may be wrong but have you tried playing around with the .hover function it may look like something like this.

    $('#slideInner').hover(function() { 
      $('#slideInner').stop();
      clearTimeout(ticker_timeout);      

或类似的东西

    $("#slideInner")
         // when mouse enters, clear the timer if it has been set
         .mouseenter(function() {
           if (timer) { clearInterval(timer) }
        })
        // when mouse goes out, start the slideshow
         .mouseleave(function() {
          timer = setInterval(function() {
              $("#slideInner > div:first")
                .fadeOut(1000)
                .next()
                .fadeIn(1000)
                .end()
                .appendTo("#slideInner");
        }, 3000);
    })
    // trigger mouseleave for initial slideshow starting
    .mouseleave();

这篇关于jQuery滑块，当鼠标悬停时如何暂停自动播放?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！