代码之家 › 专栏 › 技术社区 › Anriëtte Myburgh

Cycle-在同一容器上使用两种不同的效果

jquery-effects jquery-cycle jquery-plugins jquery

7

Anriëtte Myburgh · 技术社区 · 14 年前

jQuery.循环 在几个孩子身上骑自行车 <div> 标签。但是,我希望默认的cycle fx为 fade ,当我点击 next prev 选择器,我希望循环效果临时更改为 scrollRight 或 scrollLeft 取决于所单击的选择器。

这可能吗?

jQuery代码,如有必要:

$('#banner_content').cycle({
    fx: 'fade', // choose your transition type, ex: fade, scrollUp, shuffle, etc...
    timeout: 6500,
    speed: 2000,
    next: $("#right_arrow a"),
    prev: $("#left_arrow a"),
});

1 回复 | 直到 14 年前

1

11

Anriëtte Myburgh 14 年前

好的,我把我的问题加在 jQuery Forum ,创建者的响应如下 answer .

以下是我为此开发的代码:

var slideIndex = 0;
var nextIndex = 0;
var prevIndex = 0;

$('#banner_content').cycle({
    fx: 'fade',//fx: 'scrollHorz', // choose your transition type, ex: fade, scrollUp, shuffle, etc...
    timeout: 8000,
    speed: 1000,
    easingIn:20,
    easingOut:40,
    after: function(currSlideElement, nextSlideElement, options) {
        slideIndex = options.currSlide;
        nextIndex = slideIndex + 1;
        prevIndex = slideIndex -1;

        if (slideIndex == options.slideCount-1) {
            nextIndex = 0;
        }

        if (slideIndex == 0) {
            prevIndex = options.slideCount-1;
        }
    }
}); 

$("div.left_arrow a").click(function () {
    $('#banner_content').cycle(nextIndex, "scrollRight");
});

$("div.right_arrow a").click(function () {
    $('#banner_content').cycle(prevIndex, "scrollLeft");
});