2013-11-23 101 views
0

我使用Lemmon Juice slider由於具有可變寬度的圖像,它工作正常,除了我不能讓自動播放工作。它移動一個圖像然後停止 - 這是使用'slideToLast' : true或'infinite' : true。手動控件按預期工作。是否有我失蹤的東西會讓這個旋轉木馬無限地自動播放,而不是在移動一張幻燈片後停下來?Lemmon滑塊自動播放只移動一個,然後停止

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); 
} 

回答

0

後發現另一杯咖啡的解決方案。原來該頁面上的文檔不是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); 

    } 

希望這可以幫助別人出未來。