垂直滚动的JQuery云旋转木马

JQuery Cloud Carousel that scrolls vertically

本文关键字:旋转木马 JQuery 滚动 垂直      更新时间:2023-09-26

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

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

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

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

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

希望对你有帮助。

B

所以在深入研究代码之后,我终于弄明白了。以防有人试图在他们自己的网站上这样做,下面是我得到的:在非缩小版本的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

看到它在行动(甚至更高度定制)