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循环插件问题

回答

相关问题