垂直滚动的 JQuery Cloud Carousel答案

【问题标题】：JQuery Cloud Carousel that scrolls vertically垂直滚动的 JQuery Cloud Carousel
【发布时间】：2011-07-20 00:56:15
【问题描述】：

我希望使用 Cloud 教授在 http://www.professorcloud.com/mainsite/carousel.htm 上的 Cloud Carousel 并使其垂直滚动。我可以看到反射可能是垂直滚动的问题，如果它们没关系，我可以不使用它们，如果可能的话，我想要一个启用它们的选项。感谢您所有的帮助。（我需要它适合这里：右侧栏上的http://www.inspiritandintruth.com。）

【问题讨论】：

您是否需要 3d 解决方案，或者像 flowplayer.org/tools/demos/scrollable/vertical.html 这样的解决方案更适合您？
谢谢，但我需要更具视觉吸引力的东西，最好是 3D 的，最好是像云教授的那种。
你打算显着缩小图像吗？那个 div 的尺寸只有 101x500，书的图像，嗯，到处都是。
是的，抱歉，我只是想制作一份工作草稿，这就是它存在的原因，但我不想弄乱图像，直到我知道要使它们适合的尺寸垂直滚动效果很好。

标签： javascript jquery cloud carousel vertical-scrolling

【解决方案1】：

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

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

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

我想您可以使用其中的一个或查看他们的代码以了解他们是如何做到的。

希望对您有所帮助。

【讨论】：

我喜欢 ContentFlow 选项，但它是 25k，而 ProfessorCloud 选项只有 1.5k，我把代码弄得够乱了……

【解决方案2】：

所以在挖掘了代码之后，我终于弄明白了。如果有人试图在他们自己的网站上执行此操作，这就是我得到的：在非缩小版本的大约 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 看到它的实际效果（甚至是高度定制的）

【讨论】：