2

http://jquery.malsup.com/cycle/にある Cycle Slider プラグインを使用しています。

画像付きのユーザー コントロールを下部に含めました (前への左矢印、次への右矢印、および再生/一時停止のための 2 つのバー)。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です。理想的には、一時停止/再生ボタンは 2 つのボタンの間に配置します。

  <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>

Web サイトの例のリストは既に見ましたが、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 に答える