2

我正在使用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 相当缺乏经验，因此不胜感激。

谢谢！

4

1 回答 1

2

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');
    }    
});
于 2012-04-09T21:00:01.127 回答