JQuery 3D Canvas Carousel (marquee) Effect plugin-Cloud carousel

Source: Internet
Author: User

Plug-in name-cloud carousel

Latest Version -1.0.5

Support Ie6-ie9,firefox,chrome,opera,safari, etc.

1. Introduction of Jquery1.4.2.js and Cloudcarousel.1.0.5.js

2. Add a page to automatically load the plugin JS code, to initialize

$ (document). Ready (function () {
This initializes the container with the specified element, in this case, the carousel.
$ ("#carousel1"). Cloudcarousel ({
XPOS:450,
YPOS:110,

Buttonleft: $ (' #but1 '),
Buttonright: $ (' #but2 '),

Altbox: $ ("#alt-text"),
Titlebox: $ ("#title-text"),
Fps:30,
Reflheight:86,
Reflgap:2,
YRADIUS:40,
Autorotate: ' Left ',
autorotatedelay:1000,
speed:0.2,
Mousewheel:false,
Bringtofront:false
});
});
</script>

3. HTML structure

<div class= "Weiduduan clearfix" >

<div id= "Carousel1" >

<div id= "Title-text" >&nbsp;</div>
<div id= "Alt-text" >&nbsp;</div>

<a href= "Http://www.weiduduan.com/js" target= "_blank" ></a>

<a href= "Http://www.weiduduan.com/web" target= "_blank" ></a>

<a href= "Http://www.weiduduan.com/yunzuo" target= "_blank" ></a>

<a href= "Http://www.weiduduan.com/sucai" target= "_blank" ></a>

<a href= "Http://www.weiduduan.com/js" target= "_blank" ></a>

<div class= "Carouselleft" id= "BUT1" >&nbsp;</div>
<div class= "Carouselright" id= "But2" >&nbsp;</div>

</div>
</div>

4. Detailed parameters

reflheight:0,//The height of the reflection, Unit is pixel
reflopacity:0.5,//Reflection Transparency (0-1)
reflgap:0,//The gap between the image and the reflection, measured in pixels
minscale:0.5,//Zoom ratio
xpos:0,//x axis offset, typically set to half of the frame, that is, half the width of the "#carousel1" in the instance
ypos:0,//y axis offset, this can be self-debugging to see, very intuitive
xradius:0,//horizontal radius of rotation amplitude, this is a guess.
yradius:0,//The vertical radius of the rotation amplitude, this is guessed, because the path of the rotation is an ellipse, you know.
Altbox:null,//Show picture the style name of the ALT attribute
Titlebox:null,//display the style name of the title property of the picture
FPS:30,//I guess the step of the rotational motion
Autorotate: ' No ',//whether auto play, set "left" or "right" to play automatically
autorotatedelay:1500,//Play delay
speed:0.2,//playback speed (between 0.1 ~ 0.3)
Mousewheel:false,//whether support pulley, need to add in jquery pulley plug-ins, the official address is missing, you can use Baidu "Jquery.mousewheel" can
Bringtofront:false,//This parameter is set to True, that is, to click on the corresponding picture, scroll to the current display, usually does not turn on auto play
Buttonleft: "",//control the left button
Buttonright: "",//control the right button

JQuery 3D Canvas Carousel (marquee) Effect plugin-Cloud carousel

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.