如何停止jQuery中的電影卷

Question

我一直在谷歌上搜索如何點擊一個按鈕，但我找不到任何東西，如何停止FILMROLL。我一直在滾動他們的指南，但沒有這樣的事情，銷燬或停止滑塊。這裏是plugin和指南。並且，下面是我的代碼：

<script> 
$(function() { 
    var slideimage = new FilmRoll({ 
     container: '#slide_images', 
     height: 'auto', 
     pager : false, 
     scroll : true, 
     start_index : 2 
    }); 
    $('button').click(function(){ 
     //stop the slider 
    }); 
    }); 
</script> 

<div id="slide_images"> 
    <div data-caption="Headset" data-id="0"><a href="#"><img src="images/headset.jpg"></a></div> 
    <div data-caption="drum" data-id="1"><a href="#"><img src="images/drum.jpeg"></a></div> 
    <div data-caption="bass" data-id="2"><a href="#"><img src="images/bass.jpeg"></a></div> 
    <div data-caption="guitar" data-id="3"><a href="#"><img src="images/guitar.jpeg"></a></div> 
</div> 
<button>Stop</button> 

此外，停止按鈕後，我也希望這個繼續滑動。

有人知道嗎？

Answer 1

這是我能做的最好的。它要求您將hover選項設置爲false，否則將鼠標懸停在旋轉木馬上會使其重新開始滾動。如果您想在鼠標懸停或點擊箭頭後再次滾動鼠標，則可以刪除hover選項或將其設置爲true。

不是很漂亮，但它是關於你將得到最好的方式，它的建立。不幸的是，「重新配置」傳送帶並不是真的。可能希望查看像我一直使用的slickjs（http://kenwheeler.github.io/slick/），並有更多的功能/選項。看看這可能適合你。

下面是我想出的代碼。似乎在Chrome/Mac上工作，但沒有做任何廣泛的測試。

$(function() { 
 
    var slideimage = new FilmRoll({ 
 
     container: '#slide-images', 
 
     height: 'auto', 
 
     pager : false, 
 
     scroll : true, 
 
     hover: false, 
 
     start_index : 2 
 
    }); 
 
    
 
    $('button').click(function(){ 
 
     //stop the slider 
 
     slideimage.clearScroll(); 
 
    }); 
 
    });

#slide-images > div { 
 
    background: black; 
 
    width: 500px; 
 
    height: 200px; 
 
} 
 

 
img { 
 
    width: 500px; 
 
    height: 200px; 
 
}

<script src="http://straydogstudio.github.io/film_roll/js/vendor/jquery-1.10.1.min.js"></script> 
 
<script src="http://straydogstudio.github.io/film_roll/js/jquery.film_roll.min.js"></script> 
 

 
<div id="slide-images"> 
 
    <div data-caption="Headset" data-id="0"> 
 
    <a href="#"><img src="images/headset.jpg"></a> 
 
    </div> 
 
    <div data-caption="drum" data-id="1"> 
 
    <a href="#"><img src="images/drum.jpeg"></a> 
 
    </div> 
 
    <div data-caption="bass" data-id="2"> 
 
    <a href="#"><img src="images/bass.jpeg"></a> 
 
    </div> 
 
    <div data-caption="guitar" data-id="3"> 
 
    <a href="#"><img src="images/guitar.jpeg"></a> 
 
    </div> 
 
</div> 
 

 
<button>Stop</button>