jQuery threesixty 的效果其實跟筆者之前寫過的利用滑鼠移動控制圖片預覽一樣,可以利用滑鼠的移動來切換顯示的圖片。像它設了 25 張圖片,然後產生像 360 度產品預覽一樣。
套件名稱:jQuery threesixty
套件網址:0.6
作者網站:http://www.mathieusavard.info/threesixty/demo.html
套件網址:N/A
發佈日期:2011-08-09
檔案大小:5.88 KB
檔案下載:jquery.threesixty.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 | images(必填) 描述: 轉動時要顯示的照片陣列 預設值: [] method(選填) 描述: 控制轉動的事件;允許的值有 "click", "mouseover" 及 "auto"(自動) 預設值: "click" cycle(選填) 描述: 在轉動過程中是顯示幾輪(就是 images 中的圖片要從第一張到最後一張顯示幾次) 預設值: 1 resetMargin(選填) 描述: 這...不太懂它的用法, 但程式中也沒用到 預設值: 0 direction(選填) 描述: 顯示的方向順序, 允許的值有 "forward"(逆時鐘) 及 "backward"(順時鐘) 預設值: "forward" sensibility(選填) 描述: 用移動距離計算要顯示第幾張的...權重, 筆者建議設成 1 預設值: cycle * 0.35 autoscrollspeed(選填) 描述: 當 method 設成 "auto" 時的自動轉動速度(1000毫秒 = 1秒) 預設值: 500 |
方法說明:
檢視原始碼 JavaScript
1 2 | // 把指定的元素圖片轉換成 threesixty 效果 $(selector).threesixty(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 | <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript" src="jquery.threesixty.js"></script> <script type="text/javascript"> $(function(){ // 產生 1.jpg~25.jpg 的圖片 var arr = []; for(var x=1; x<= 25; x++){ arr.push('images/' + x + '.jpg'); } // 讓 #example1 轉換成 threesixty 效果 // 圖片來源為 arr 陣列 // 使用滑鼠移動來控制轉動 $('#example1').threesixty({ images: arr, method: 'mousemove', cycle: 1, sensibility: 1 }); // 讓 #example2 轉換成 threesixty 效果 // 圖片來源為 arr 陣列 // 自動轉動且反順時鐘顯示 $("#example2").threesixty({ images: arr, method: 'auto', autoscrollspeed: 100, direction: 'backward' }); }); </script> <body> <h3>用滑鼠轉動</h3> <img src="images/1.jpg" id="example1" width="480" height="480"> <h3>自動轉動</h3> <img src="images/1.jpg" id="example2" width="480" height="480"> </body> |
作者網站:https://github.com/remybach/jQuery.superLabels
應為 → https://github.com/matdumsa/jQuery.threesixty
謝謝您的糾正, 已更新!!