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

发布于 2024-09-08 11:16:25 字数 547 浏览 4 评论 0原文

我目前正在使用 jQuery.Cycle 循环访问一些子

标记。但是,我希望默认的循环效果为 fade,当我单击 nextprev 选择器时,我希望循环效果为根据单击的选择器暂时更改为 scrollRightscrollLeft

这可能吗?

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"),
});

I'm currently using jQuery.Cycle to cycle through a few child <div> tags. However, I want the default cycle fx to be fade, and when I click on the next or prev selectors, I want the cycle fx to temporarily change to scrollRight or scrollLeft depending on the selector clicked.

Is this possible?

jQuery code, if necessary:

$('#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"),
});

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(1

青朷 2024-09-15 11:16:25

好的,我在 jQuery 论坛 上添加了我的问题,创建者回复了以下 答案

这是我为此开发的代码:

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");
});

Ok, I added my question on the jQuery Forum, and the creator responded with the following answer.

Here is my code that I developed for this:

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");
});
~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文