JQuery Cloud Carousel that scrolls vertically

问题

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.)

回答1:

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.

回答2:

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

来源：https://stackoverflow.com/questions/6755844/jquery-cloud-carousel-that-scrolls-vertically

标签

javascript

jquery

cloud

carousel

vertical-scrolling