Question

我正在使用jQuery Background Position插件和jQuery Cycle插件尝试在幻灯片滚动的同时制作滑块和背景图像。以下是我目前的样本：

HTML

<div class="container">
    <div class="slider">
        <div class="pane">
            Text asd dddsa sadsad
        </div>
        <div class="pane">
            Text asd dddsa sadsad
        </div> 
        <div class="pane">
            Text asd dddsa sadsad
        </div>        
    </div>
    <a href="#" id="prev-slide">&lt; Prev</a>
    <a href="#" id="next-slide">Next &gt;</a>
</div>

JS

$(function() {
    // Animate background when clicking slider arrows
    $('#prev-slide').on('click', function(event) {
        event.preventDefault();
        slideBgForward();
    });

    $('#next-slide').on('click', function(event) {
        event.preventDefault();
        slideBgBackward();
    });

    $('.slider').cycle({
        fx   : 'scrollHorz',
        next : '#next-slide',
        prev : '#prev-slide',
        before : function(currSlideElement, nextSlideElement, options, forwardFlag) {
            if (forwardFlag) {
                slideBgBackward();
            } else {
                slideBgForward();
            }                
        }            
    });

    // Slide background forwards
    function slideBgForward() {
        $('.container').animate({
            backgroundPosition: '-=20% 0'
        }, 1500);
    }

    // Slide background backwards
    function slideBgBackward() {
        $('.container').animate({
            backgroundPosition: '-=20% 0'
        }, 1500);
    }
});

http://jsfiddle.net/vengiss/gshtZ/

如果我单独离开滑块滚动它按预期工作，但是如果我单击下一个/ prev链接移动幻灯片，背景动画两次，我相信这是因为点击链接时会调用滑动功能在幻灯片开始滚动之前。有没有办法让它只滚动一次？

提前致谢。

Answer 1

我认为您的问题是，您已经要求('.slider').cycle()处理您的next和prev，和您也要求jQuery处理它们 - 并且每个人都按照你的要求行事，因此，你的背景是动画两次。

我很想尝试删除/停用$('#next-slide').on('click')和$('#prev-slide').on('click')，看看会发生什么。

使用jQuery循环插件绑定到回调之前的函数触发两次

1 个答案: