垂直滚动的 JQuery Cloud Carousel

发布于 2024-11-25 07:16:01 字数 342 浏览 0 评论 0原文

我希望在 http://www.professorcloud.com/mainsite 上使用云教授的云传送带/carousel.htm 并使其垂直滚动。我可以看到反射可能是垂直滚动的问题,如果可以的话,我可以不使用它们,如果可能的话,我希望有一个选项来启用它们。感谢您的帮助。 (我需要它适合这里:右侧栏上的 http://www.inspiritandintruth.com。)

I am looking to take the Cloud Carousel by Professor Cloud on http://www.professorcloud.com/mainsite/carousel.htm and make it scroll vertically. I can see that reflections may be an issue with a vertical scroll and if they are that's okay, I can do without them, I'd like an option to enable them if possible. Thanks for all of your help. (I need it to fit here: http://www.inspiritandintruth.com on the right bar.)

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

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

发布评论

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

评论(2

猫弦 2024-12-02 07:16:01

我有同样的问题。我发现这两个具有相同的 3D 效果,并且支持开箱即用的垂直滚动。

http://www.jacksasylum.eu/ContentFlow/

http://www.bkosborne.com/jquery-waterwheel-carousel

我想你可以使用其中之一他们或看查看他们的代码,看看他们是如何做到的。

希望有帮助。

I have the same problem. I found these two that have the same 3d effect and Do support vertical scrolling out of the box.

http://www.jacksasylum.eu/ContentFlow/

http://www.bkosborne.com/jquery-waterwheel-carousel

I guess you could either use one of them or look at their code to see how they did it.

Hope that helps.

B

淡紫姑娘! 2024-12-02 07:16:01

因此,在研究了代码之后,我终于弄清楚了。如果有人尝试在自己的网站上执行此操作,这就是我得到的:在非缩小版本的第 260 行左右,您有两行如下:

x = this.xCentre + (( (funcCos(radians) * this.xRadius) - (item.orgWidth*0.5)) * scale);
y = this.yCentre + (( (sinVal * this.yRadius)  ) * scale);

只需将它们更改为:

y = this.yCentre + (( (funcCos(radians) * this.yRadius) - (item.orgWidth*0.5)) * scale);
x = this.xCentre + (( (sinVal * this.xRadius)  ) * scale);

注意 x 和 y 是如何切换的( 3x)

您需要搞乱初始化内容,尤其是 xPos 和 xRadius,这是我的最终结果:

$("#bookscroll").CloudCarousel({            
    xPos: 11,
    yPos: 170,
    xRadius: 16,
    yRadius: 170,
    buttonLeft: $("#book-down"),
    buttonRight: $("#book-up"),
    altBox: $("#book-alt"),
    titleBox: $("#book-title"),
    mouseWheel: true,
    bringToFront: true,
    autoRotate: 'left',
    speed: 0.02,
    autoRotateDelay: 4000
});

希望这对某人有帮助,您可以在 http://www.inspiritandintruth.com

So after digging around the code I finally figured it out. In case anyone ever attempts to do this on their own site here's what I got: At about line 260 of the non-minified version, you have two lines like this:

x = this.xCentre + (( (funcCos(radians) * this.xRadius) - (item.orgWidth*0.5)) * scale);
y = this.yCentre + (( (sinVal * this.yRadius)  ) * scale);

Just Change them to:

y = this.yCentre + (( (funcCos(radians) * this.yRadius) - (item.orgWidth*0.5)) * scale);
x = this.xCentre + (( (sinVal * this.xRadius)  ) * scale);

Notice how the x and y have been switched (3x)

You'll need to mess around with the initialization stuff especially the xPos and xRadius, here were my end results:

$("#bookscroll").CloudCarousel({            
    xPos: 11,
    yPos: 170,
    xRadius: 16,
    yRadius: 170,
    buttonLeft: $("#book-down"),
    buttonRight: $("#book-up"),
    altBox: $("#book-alt"),
    titleBox: $("#book-title"),
    mouseWheel: true,
    bringToFront: true,
    autoRotate: 'left',
    speed: 0.02,
    autoRotateDelay: 4000
});

Hope this helps someone, you can see it in action (and even more highly customized) at http://www.inspiritandintruth.com

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