jQuery循環插件問題

我正在使用jQuery循環插件，並且在添加播放/暫停選項後遇到了一些麻煩。jQuery循環插件問題

代碼如下所示;

 $('#img').cycle({ 
      fx: 'fade', 
      speed: 'slow', 
      timeout: 1000, 
      pager: '.imagegallerypager.r2s1', 
      pagerClick: function (zeroBasedSlideIndex, slideElement) { 
       $('#txt').cycle({ 
        startingSlide: zeroBasedSlideIndex 
       }); 
       $('#txt').cycle('pause'); 
       $('#img').cycle('pause'); 

      } 
     }); 

     $('#txt').cycle({ 
      fx: 'none', 
      speed: 'slow', 
      timeout: 1000 
     }); 

     $('#playpause, .imagegallerypager a').click(function() { 
      if ($('#playpause').attr('class') == 'pause') { 
       $('#txt').cycle('pause'); 
       $('#img').cycle('pause'); 
       $('#playpause').html('<img src="images/icon_play.gif" alt="Play" title="Play" />'); 
       $('#playpause').removeClass('pause'); 
       $('#playpause').addClass('play'); 
      } 
      else if ($(this).attr('class') == 'play') { 
       $('#txt').cycle('resume'); 
       $('#img').cycle('resume'); 
       $('#playpause').html('<img src="images/icon_pause.gif" alt="Pause" title="Pause" />'); 
       $('#playpause').removeClass('play'); 
       $('#playpause').addClass('pause'); 
      } 
     });

該腳本運行良好，直到我按下暫停按鈕，然後播放按鈕再次開始動作。 img運行良好，但txt似乎有設置重置（即fx effet，超時效果等）導致img和txt被設置，不再遵循對方。我嘗試了很多不同的東西，但迄今沒有運氣。

有什麼建議嗎？

來源

2010-10-11 kastru

無關，但檢查'.attr（ '類'）== ...'是不是檢查好'.hasClass（...）' 。不要忘記標籤可能有多個類，並且'=='比較不會總是有效。 – VoteyDisciple 2010-10-11 14:32:07

雖然我不得不修改代碼以使用.hasClass（），因爲檢查'class'屬性是不可靠的（jQuery在類名稱中留下空格）。

這是我嘗試使用代碼：

<!doctype html> 
<html> 
<head> 
<title>JQuery Cycle Plugin - Example Slideshow</title> 
<style type="text/css"> 
.slideshow { height: 232px; width: 232px; margin: auto } 
.slideshow img { padding: 15px; border: 1px solid #ccc; background-color: #eee; } 
</style> 
<!-- include jQuery library --> 
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script> 

<!-- include Cycle plugin --> 
<script type="text/javascript" src="http://cloud.github.com/downloads/malsup/cycle/jquery.cycle.all.2.74.js"></script> 

<!-- initialize the slideshow when the DOM is ready --> 
<script type="text/javascript"> 
$(document).ready(function() { 

$('.slideshow').cycle({ 
    fx: 'fade', 
    speed: 'slow', 
    timeout: 1000, 
    pager: '.imagegallerypager.r2s1', 
    pagerClick: function (zeroBasedSlideIndex, slideElement) { 
     $('#txt').cycle({ 
      startingSlide: zeroBasedSlideIndex 
     }); 
     $('#txt').cycle('pause'); 
     $('#img').cycle('pause'); 

    } 
}); 

$('#txt').cycle({ 
    fx: 'none', 
    speed: 'slow', 
    timeout: 1000 
}); 

$('#playpause').click(function() { 
console.log('test'); 
    if ($('#playpause').hasClass('pause')) { 
     $('#txt').cycle('pause'); 
     $('#img').cycle('pause'); 
     $('#playpause').html('play'); 
     $('#playpause').removeClass('pause'); 
     $('#playpause').addClass('play'); 
    } 
    else if ($(this).hasClass('play')) { 
     $('#txt').cycle('resume'); 
     $('#img').cycle('resume'); 
     $('#playpause').html('pause'); 
     $('#playpause').removeClass('play'); 
     $('#playpause').addClass('pause'); 
    } 
}); 

}); 
</script> 
</head> 
<body> 
    <div class="slideshow" id="img"> 
    <img src="http://cloud.github.com/downloads/malsup/cycle/beach1.jpg" width="200" height="200" /> 
    <img src="http://cloud.github.com/downloads/malsup/cycle/beach2.jpg" width="200" height="200" /> 
    <img src="http://cloud.github.com/downloads/malsup/cycle/beach3.jpg" width="200" height="200" /> 
    <img src="http://cloud.github.com/downloads/malsup/cycle/beach4.jpg" width="200" height="200" /> 
    <img src="http://cloud.github.com/downloads/malsup/cycle/beach5.jpg" width="200" height="200" /> 
    </div> 
    <div id="txt"> 
    <span>one</span> 
    <span>two</span> 
    <span>three</span> 
    <span>four</span> 
    <span>five</span> 
    </div> 
    <a href="#" id="playpause" class="pause">pause</a> 
</body> 
</html>

來源

2010-10-11 14:36:01 Mikee

是的，這是有效的。但你的例子不包括尋呼機 - 這是代碼，弄亂了我的腳本; – kastru 2010-10-11 17:29:48

pagerClick：function（zeroBasedSlideIndex，slideElement）{（'＃txt'）.cycle（{ startingSlide：zeroBasedSlideIndex }）; $（'＃txt'）。cycle（'pause'）; $（'＃img'）。cycle（'pause'）; } – kastru 2010-10-11 17:30:57

嘗試添加此div到HTML的底部;

當你點擊尋呼機中的一個數字，點擊播放/暫停按鈕（在這種情況下是兩次），你會看到圖像將恢復正常，但文本將被設置爲默認選項？ – kastru 2010-10-11 17:34:12

jQuery循環插件問題

回答

相關問題