CloudCarousel 是能讓我們把圖片弄成 3D 立體的環狀瀏覽的套件。除了可以透過左右鈕來旋轉切換之外,若在引用 Mouse Wheel Extension 後則能支援滑鼠滾輪來控制呢。
套件名稱:ACloudCarousel
套件版本:1.0.3
作者網站:http://www.professorcloud.com/mainsite/carousel.htm
套件網址:N/A
發佈日期:2010-05-13
檔案大小:11.6 KB
檔案下載:cloud-carousel.1.0.3.js
引用檔案:jquery.mousewheel.js
參數說明:
檢視原始碼 JavaScript
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 | minScale(選填) 描述: 套用到最遠項目的縮放值 預設值: 0.5 reflHeight(選填) 描述: 倒影的高度,若設成 0 表示沒有倒影 預設值: 0 reflGap(選填) 描述: 圖片跟倒影的間距 預設值: 0 reflOpacity(選填) 描述: 倒影的透明度:0 表示完全透明,而 1 表示不透明 預設值: 0.5 xRadius(選填) 描述: 圓的寬度;預設會用容器的寬 / 2.3 預設值: 0 yRadius(選填) 描述: 圓的高度,透過修改此值可以改變傾斜度;預設會用容器的高 / 6 預設值: 0 xPos(選填) 描述: 圓心的 x 座標(水平),通常會設成如容器寬度的一半 預設值: 0 yPos(選填) 描述: 圓心的 y 座標(垂直),通常會設成如容器高度的一半 預設值: 0 buttonLeft(選填) 描述: 用來控制往左旋轉的元素,不一定要在容器裡面 預設值: null buttonRight(選填) 描述: 用來控制往右旋轉的元素,不一定要在容器裡面 預設值: null titleBox(選填) 描述: 用來顯示圖片 title 屬性用,不一定要在容器裡面(滑鼠移到圖片上時也會有作用) 預設值: null altBox(選填) 描述: 用來顯示圖片 alt 屬性用,不一定要在容器裡面(滑鼠移到圖片上時也會有作用) 預設值: null FPS(選填) 描述: 旋轉時的每秒速度,數字越高會旋轉越快。但如果客戶端電腦效能不好時,可能會造成反效果 預設值: 30 speed(選填) 描述: 圖片跟圖片項目間的移動速度,建議值應為 0.1 ~ 0.3 之間。(可允許的值應是大於 0 且小於 1) 預設值: 0.2 autoRotate(選填) 描述: 是否自動往左或是往右的旋轉;允許的值有 'no', 'left' 及 'right' 預設值: 'no' autoRotateDelay(選填) 描述: 自動旋轉時的延遲時間,建議最設為 1000(1000毫秒表示1秒) 預設值: 1500 mouseWheel(選填) 描述: 如果設為 true 則支援滑鼠滾輪來切換上下張圖片。但需要引用 Mouse Wheel Extension。 預設值: false |
方法說明:
檢視原始碼 JavaScript
1 2 | // 把指定的區塊轉換成 CloudCarousel 效果 $(selector).CloudCarousel(options); |
使用範例:
檢視原始碼 JavaScript
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 | <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript" src="cloud-carousel.1.0.3.js"></script> <script type="text/javascript" src="jquery.mousewheel.js"></script> <style type="text/css"> #carousel1 { width: 570px; height: 384px; background: url(images/bg.jpg); overflow: scroll; } .cloudcarousel img { width: 128px; height: 164px; } .carouselLeft { display: none; position: absolute; top: 20px; right: 64px; background: url(images/rotate-left.png); width: 40px; height: 40px; background-position: 0px 0px; } .carouselLeft:hover { width: 40px; height: 40px; background-position: 0px 40px; cursor: auto; } .carouselRight { display: none; position: absolute; top: 20px; right:20px; background: url(images/rotate-right.png); width: 40px; height: 40px; background-position: 0px 0px; } .carouselRight:hover { width: 40px; height: 40px; background-position: 0px 40px; } #da-vinci-title { display: none; color: #f90; font-family: Georgia, "Times New Roman", Times, serif; font-size: 17px; font-weight: bold; margin: 20px; text-transform: uppercase; letter-spacing: 1px; margin-bottom: 10px; width: 80%; } #da-vinci-alt{ display: none; color: #ddd; margin: 20px; margin-top: 0px; font-size: 14px; font-weight: bold; } </style> <script type="text/javascript"> $(function(){ // 把 #carousel1 轉換成 CloudCarousel 效果 // 設定其 title, alt 及控制左右旋轉的元素 // 並讓其自動往左旋及支援滑鼠滾輪 $("#carousel1").CloudCarousel({ reflHeight: 56, reflGap: 2, titleBox: $('#da-vinci-title'), altBox: $('#da-vinci-alt'), buttonLeft: $('#but1'), buttonRight: $('#but2'), yRadius: 40, xPos: 285, yPos: 120, speed: 0.15, autoRotate: 'left', mouseWheel: true }); }); </script> <body> <div id="carousel1"> <img class="cloudcarousel" src="images/test9.png" alt="Self-portrait in red chalk, circa 1512-1515." title="Leonardo Da Vinci" /> <img class="cloudcarousel" src="images/test1.png" alt="Oil on cotton wood, circa 1503–1505." title="Mona Lisa" /> <img class="cloudcarousel" src="images/test2.png" alt="Oil on wood panel, 1485." title="Lady with an Ermine" /> <img class="cloudcarousel" src="images/test3.png" alt="Oil on canvas, circa 1501." title="Madonna of the Yarnwinder" /> <img class="cloudcarousel" src="images/test4.png" alt="Oil on canvas (transferred from panel), circa 1490." title="Madonna and the Child" /> <img class="cloudcarousel" src="images/test5.png" alt="Oil on walnut panel transferred to canvas, circa 1510–1515." title="Bacchus" /> <img class="cloudcarousel" src="images/test6.png" alt="Oil on panel, circa 1478–1480." title="Madonna of the Carnation" /> <img class="cloudcarousel" src="images/test7.png" alt="Charcoal, black and white chalk on tinted paper, circa 1499–1500." title="The Virgin and Child with St. Anne and St. John the Baptist" /> <img class="cloudcarousel" src="images/test8.png" alt="Oil on panel, circa 1510." title="The Virgin and Child with St. Anne" /> <div id="but1" class="carouselLeft"></div> <div id="but2" class="carouselRight"></div> <p id="da-vinci-title"></p> <p id="da-vinci-alt"></p> </div> </body> |
附註:
使用 CloudCarousel 時並不用什麼 CSS 設定,只是要把圖片加上 .cloudcarousel 即可。建議先把控制左右旋轉及、顯示 Title 及 Alt 用的元素先設 display 為 hidden,這樣當 JavaScript 被停用時才不會出現。同時也把容器的 overflow 設成 scroll,,這樣當 JavaScript 被停用時才能出現捲軸讓使用者來使用。
基本的 HTML 架構:
檢視原始碼 HTML
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | <!-- 容器 --> <div id = "carousel1" style="width:256px; height:128px;background:#000;overflow:scroll;"> <!-- 只要圖片的 class 設成 cloudcarousel 則會被套用 --> <!-- 也可以在圖片外加上超連結 --> <img class = "cloudcarousel" src="#" alt="alt" title="title" /> <img class = "cloudcarousel" src="#" alt="alt" title="title" /> <img class = "cloudcarousel" src="#" alt="alt" title="title" /> <img class = "cloudcarousel" src="#" alt="alt" title="title" /> </div> <!-- 控制左右旋轉的鈕 --> <input id="left-but" type="button" value="Left" /> <input id="right-but" type="button" value="Right" /> <!-- 用來顯示圖片的 title 及 alt 使用 --> <p id="title-text"></p> <p id="alt-text"></p> |
請問一下大大~要如何新增一個「停止」的按鈕呀??
你這鈕是要加在它的兩個上下鈕中嗎?可能得修改它的 js 然後自行加入鈕才行了XD
感謝分享!
請問一下, 這套件在ie10時,圖片反射的部份無法漸層(淡), 該怎麼辦呢?
有試過官網最新的 1.0.5 版了嗎?