Lemmon Slider Auto Play只移动一个,然后停止



由于有可变宽度的图像,我正在使用Lemmon Juice滑块,它运行良好,只是我无法自动播放。它移动一个图像,然后停止——这是在使用'slideToLast' : true或'infinite' : true时发生的。手动控制按预期工作。我有没有错过什么东西可以让这个旋转木马无限自动播放,而不仅仅是在移动一张幻灯片后停止?

html:

<div id="slider1" class="slider">
  <ul>
      <li>
        <img src="http://domain.com/slide/image1.jpg"/>            
        <span class="caption">
         some caption here
        </span>
      </li>
      <li>
        <img src="http://domain.com/slide/image2.jpg"/>            
        <span class="caption">
         2nd caption here
        </span>
      </li>
      <li>
        <img src="http://domain.com/slide/image3.jpg"/>            
        <span class="caption">
         3rd caption here
        </span>
      </li>
  </ul>
</div>

JS:

 // home page slider 
var sliderTimeout;
window.onload = function(){
    $( '#slider1' ).lemmonSlider({
         'infinite' : true
        /*'slideToLast' : true*/
    });
    // run
    sliderAutoplay();
    }
    // slider autoplay function
    function sliderAutoplay(){
        $( '#slider1' ).trigger( 'nextSlide' );
        sliderTimeout = setTimeout( 'sliderAutoplay', 1500 );
    }
    // pause slider function
    function sliderPause(){
        clearTimeout( sliderTimeout );
}

又喝了一杯咖啡后找到了解决方案。事实证明,那一页上的文档并非100%准确。我做了一个视图源,看看自动播放滑块是如何实际工作的。

对我来说,正在工作的jQuery是:

    window.onload = function(){
         // home page slider 
        $( '#slider1' ).lemmonSlider({ infinite: true });
        sliderAutoplay();
        $( '#slider3-play' ).click(function(){
            if ( sliderTimeout == null ){
                sliderAutoplay();
            }
            return false;
        });
// this part in original page, but I don't really need it
        $( '#slider3-pause' ).click(function(){
            clearTimeout( sliderTimeout );
            sliderTimeout = null;
            return false;
        });

    }
    // autoplay
    var sliderTimeout = null;
    function sliderAutoplay(){
        $( '#slider1' ).trigger( 'nextSlide' );
        sliderTimeout = setTimeout( 'sliderAutoplay()', 3500 );
    }

希望这对将来的某个人有所帮助。

最新更新