Question

自从我上次查看jQuery以来已经很长时间了。我有以下标记

<div class="col-md-3">
  <div id="race_track">
    <%= image_tag 'race_track/track_curved.jpg', data: { engine: 'Sports'}  %>
    <%= image_tag 'race_track/track_hills.jpg', data: { engine: 'Hills'}  %>
    <%= image_tag 'race_track/track_rough.jpg', data: { engine: 'Rough'}  %>
    <%= image_tag 'race_track/track_straight.jpg', data: { engine: 'Straight'}  %>
  </div>
  <p class="lead"><a class="btn btn-lg btn-info">Select</a></p>
</div>

我希望实现的目标是让每个图像一次显示一个，然后当我点击“选择＆＃39;循环会在当时的任何图像上停止（尽管如果需要，这可以是随机的）。

我看过jQuery Cycle Plugin，但暂停事件只发生在您将鼠标悬停在图片上并且不是我要查找的内容时。

我不想在这里重新发明轮子。

Answer 1

从jQuery Cycle Plugin Option Reference开始，您可以将其api称为暂停，如$('#slideshow').cycle('pause');

$(document).ready(function() {
    $('.slideshow').cycle({
		fx: 'fade', // choose your transition type, ex: fade, scrollUp, shuffle, etc...
        timeout: 500
	});
  
    $('#start').on('click', function() {
        // Make it roll again
        $('.slideshow').cycle('resume');
    });
    $('#stop').on('click', function() {
        // Make it pause rolling.
        $('.slideshow').cycle('pause');
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript" src="http://malsup.github.com/jquery.cycle.all.js"></script>
<div class="slideshow" style="position: relative;">
  <img src="http://malsup.github.com/images/beach1.jpg" width="200" height="200" spfieldtype="null" style="position: absolute; top: 0px; left: 0px; display: none; z-index: 5; opacity: 0;">
  <img src="http://malsup.github.com/images/beach2.jpg" width="200" height="200" spfieldtype="null" style="position: absolute; top: 0px; left: 0px; display: block; z-index: 5; opacity: 0.0945702; width: 200px; height: 200px;">
  <img src="http://malsup.github.com/images/beach3.jpg" width="200" height="200" spfieldtype="null" style="position: absolute; top: 0px; left: 0px; display: block; z-index: 6; opacity: 0.904508; width: 200px; height: 200px;">
  <img src="http://malsup.github.com/images/beach4.jpg" width="200" height="200" spfieldtype="null" style="position: absolute; top: 0px; left: 0px; display: none; z-index: 2; opacity: 0;">
  <img src="http://malsup.github.com/images/beach5.jpg" width="200" height="200" spfieldtype="null" style="position: absolute; top: 0px; left: 0px; display: none; z-index: 1; opacity: 0;">
</div>
<button id="start">start</button>
<button id="stop">stop</button>

迭代图像，然后使用jQuery按下按钮暂停

1 个答案: