0

我正在使用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/

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

提前致谢。

4

1 回答 1

2

我认为你的问题是你已经要求('.slider').cycle()处理你的nextand prev，并且你也要求 jQuery 来处理它们 - 每个人都在做你要求的事情，因此，你的背景动画两次。

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

于 2012-11-06T19:41:35.147 回答