Question

我正在使用http://jquery.malsup.com/cycle/

中的Cycle Slider插件

我在底部包含了用户控件和图像（左箭头为上一个，右箭头为下一个，两个条为播放/暂停）。 Prev和Next按钮完美运行。我虽然停留在播放/暂停按钮上。

我不知道如何在点击时将图像更改为播放符号，并在再次单击时返回到暂停符号。

以下是当前代码：

<script type="text/javascript">
$(document).ready(function() 
{$('#slides').cycle({ pager: '#slideshow_links', pause: 1, speed: 1200, timeout: 6000,  next: '#next',prev: '#prev', cleartype:  true, cleartypeNoBg:  true });});</script>

这是HTML。理想情况下，暂停/播放按钮会在那里的两个按钮之间进行。

  <div id="controls">
    <span><a href="" id="prev"><img src="/images/left.gif" width="14" height="11" alt="Previous" title="Previous" style="border:0;"></a></span>
    <span><a href="" id="next"><img src="/images/right.gif" width="14" height="11" alt="Next" title="Next" style="border:0;"></a></span>
</div>

我已经查看了网站上的示例列表，但我对jQuery缺乏经验，所以感谢任何帮助。

谢谢！

Answer 1

http://jsfiddle.net/Gcqfu/

<div id="controls">
    <span><a href="#" id="prev"><img src="/images/left.gif" width="14" height="11" alt="Previous" title="Previous" style="border:0;"></a></span>
     <span><a href="#" id="pauseOrPlay" data-playing='false'><img src="/images/play.gif" width="14" height="11" alt="Play" title="Play" style="border:0;"></a></span>
    <span><a href="#" id="next"><img src="/images/right.gif" width="14" height="11" alt="Next" title="Next" style="border:0;"></a></span>
</div>

JS：

$("#pauseOrPlay").on("click", function(e) {
    e.preventDefault();
   var $this = $(this),
        playing = $this.data("playing"),
        $slides = $("#slides");
   if (!playing)
   {
       $this.data("playing", true);
       $this.children("img:first").attr("src", "/images/pause.gif").attr("title", "Pause").attr("alt", "Pause");  
       // call play for the plugin here
       $slides.cycle('resume');
   } 
    else
    {
        $this.data("playing", false);
       $this.children("img:first").attr("src", "/images/play.gif").attr("title", "Play").attr("alt", "Play");  
       // call pause for the plugin here 
       $slides.cycle('pause');
    }    
});

jQuery - 循环插件暂停/播放按钮

1 个答案: