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" > </div>
<div id= "Alt-text" > </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" > </div>
<div class= "Carouselright" id= "But2" > </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