如何在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>