jQuery 3D canvas 旋轉木馬(跑馬燈)效果外掛程式 - cloud carousel

標籤：

外掛程式名稱-cloud carousel

最新版本-1.0.5

支援ie6-ie9，firefox，chrome，opera，safari等

1。引入jquery1.4.2.js 和CloudCarousel.1.0.5.js

2。添加頁面自動載入外掛程式js代碼，進行初始化

$(document).ready(function(){
// 這初始化容器中指定的元素，在這種情況下，旋轉木馬.
　　$("#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結構

<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"><img src="images/9d03c58136f0f413d4f619536213bddb.jpg" title="jquery JScrollPane 外掛程式" alt="jquery JScrollPane 外掛程式設定瀏覽器預設垂直捲軸和內建捲軸" class="cloudcarousel" /></a>

<a href="http://www.weiduduan.com/web" target="_blank"><img src="images/f2a366c8954d666360c4b214940963cf.jpg" title="jquery 映像預覽效果" alt="jquery 圖片放大非同步載入圖片製作一個簡單的jquery 映像預覽效果" class="cloudcarousel" /></a>

<a href="http://www.weiduduan.com/yunzuo" target="_blank"><img src="images/bb276cedeaeb0438ed3275a9711b1d69.jpg" title="jquery 圖片滾動特效" alt="jquery 圖片滾動特效製作 slide 圖片類似窗帘式滾動" class="cloudcarousel" /></a>

<a href="http://www.weiduduan.com/sucai" target="_blank" ><img src="images/aa6d7f26f941d87728eb0716d36d9cbe.jpg" title="jquery 圖片展示" alt="jquery 圖片展示製作圖片類似金字塔式放大縮小展示" class="cloudcarousel" /></a>

<a href="http://www.weiduduan.com/js" target="_blank" ><img src="images/e748fbed210baf3dfa8849af0f89dfd7.jpg" title="jquery 圖片投影片" alt="jquery 圖片投影片仿IBM首頁焦點圖切換，類似flash動態片切換" class="cloudcarousel" /></a>

<div class="carouselLeft" id="but1">&nbsp;</div>
<div class="carouselRight" id="but2">&nbsp;</div>

</div>
</div>

4。參數詳解

reflHeight:0, //倒影的高度，單位是像素 
reflOpacity:0.5, //倒影透明度（0-1） 
reflGap:0, //圖片與倒影之間的間隙，單位是像素 
minScale:0.5, //縮放比例 
xPos:0, //X軸位移，一般設定成外框的一半，也就是執行個體中“#carousel1”的寬度的一半 
yPos:0, //Y軸位移，這個可以自己調試看看，很直觀的 
xRadius:0, //旋轉幅度的水平半徑，這個是猜的 
yRadius:0, //旋轉幅度的垂直半徑，這個是猜的，因為旋轉的路徑是個橢圓，你明白的
altBox:null, //顯示圖片alt屬性的樣式名稱 
titleBox:null, //顯示圖片title屬性的樣式名稱 
FPS: 30, //我猜是旋轉運動的步長 
autoRotate: ‘no’, //是否自動播放，設定“left”或者“right”即可自動播放 
autoRotateDelay: 1500, //播放延時 
speed:0.2, //播放速度（0.1 ~ 0.3之間） 
mouseWheel: false, //是否支援滑輪，需要加在jQuery滑輪外掛程式，官方的地址不見了，可以用百度“jquery.mousewheel”即可 
bringToFront: false, //這個參數設定為true，就是表示點擊相應的圖片，滾動到當前展示，一般是不開啟自動播放時 
buttonLeft: “”, //控制向左的按鈕 
buttonRight: “”, //控制向右的按鈕

jQuery 3D canvas 旋轉木馬(跑馬燈)效果外掛程式 - cloud carousel