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

Question

我正在使用位于 http://jquery.malsup.com/cycle/ 的 Cycle Slider 插件

我在底部添加了带有图像的用户控件(左箭头表示上一个，右箭头表示下一个，两个栏表示播放/暂停)。上一个和下一个按钮工作得很好。但我卡在了“播放/暂停”按钮上。

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

这是当前代码:

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