Question

我正在使用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被设置并且不再相互跟随。我尝试了很多不同的东西，但到目前为止还没有运气。

有什么建议吗？

Answer 1

似乎在这里工作得很好，虽然我不得不修改你的代码以使用.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>

jQuery循环插件的问题

1 个答案: