垂直滚动的JQuery Cloud Carousel

时间:2011-07-20 00:56:16

标签: javascript jquery cloud carousel vertical-scrolling

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

2 个答案:

答案 0 :(得分:1)

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

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

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

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

希望有所帮助。

答案 1 :(得分:1)

所以在挖掘代码之后我终于搞清楚了。如果有人试图在他们自己的网站上这样做,这就是我得到的:在非缩小版本的第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

看到它的实际效果(甚至更高度自定义)