AmazeUI圖片輪播，
AmazeUI個人感覺確實蠻不錯的，雖然現在還不算特別完善，但畢竟是國內首款，用起來比較符合國人。
今天要講得是圖片輪播，感覺這個應該能夠幫到大家，再此整理整理。
<!DOCTYPE html><html><head><meta charset="utf-8"><title></title><script type="text/javascript" src="js/jquery.min.js"></script><script type="text/javascript" src="js/amazeui.legacy.js"></script><script type="text/javascript" src="js/amazeui.js"></script><script type="text/javascript" src="js/amazeui.widgets.helper.js"></script><script type="text/javascript" src="js/app.js"></script><script type="text/javascript" src="js/handlebars.min.js"></script><script type="text/javascript" src="js/polyfill/rem.min.js"></script><script type="text/javascript" src="js/polyfill/respond.min.js"></script><link rel="stylesheet" href="css/amazeui.css" /><link rel="stylesheet" href="css/admin.css" /><link rel="stylesheet" href="css/amazeui.flat.css" /><link rel="stylesheet" href="css/app.css" /><script type="text/javascript">$(function(){$('.am-slider').flexslider({playAfterPaused: 3000,animation: "fade",animationLoop: true,smoothHeight: true,animationSpeed: 4000});}); </script></head><body><div class="am-slider am-slider-default"><ul class="am-slides"><li><img src="img/1.jpg"></li><li><img src="img/2.jpg"></li><li><img src="img/3.jpg"></li><li><img src="img/4.jpg"></li></ul></div></body></html>上面引用到的檔案其實可以不需要那麼多，不過都是官方檔案中的檔案。
主要是控制項的屬性
{
animation: "slide", // String: ["fade"|"slide"]，動畫效果
easing: "swing", // String: 滾動動畫計時函數
direction: "horizontal", // String: 滾動方向 ["horizontal"|"vertical"]
reverse: false, // Boolean: 翻轉 slide 運動方向
animationLoop: true, // Boolean: 是否迴圈播放
smoothHeight: false, // Boolean: 當 slide 圖片比例不一樣時
// "true": 父類自動適應圖片高度
// "false": 不自動適應，父類高度為圖片的最高高度，預設為false
startAt: 0, // Integer: 開始播放的 slide，從 0 開始計數
slideshow: true, // Boolean: 是否自動播放
slideshowSpeed: 5000, // Integer: ms 滾動間隔時間
animationSpeed: 600, // Integer: ms 動畫捲動速度
initDelay: 0, // Integer: ms 首次執行動畫的延遲
randomize: false, // Boolean: 是否隨機 slide 順序
// Usability features
pauseOnAction: true, // Boolean: 使用者操作時停止自動播放
pauseOnHover: false, // Boolean: 懸停時暫停自動播放
useCSS: true, // Boolean: 是否使用 css3 transition
touch: true, // Boolean: 允許觸控螢幕觸摸滑動滑塊
video: false, // Boolean: 使用視頻的 slider，防止 CSS3 3D 變換毛刺
// Primary Controls
controlNav: true, // Boolean: 是否建立控制點
directionNav: true, // Boolean: 是否建立上/下一個按鈕（previous/next）
prevText: "Previous", // String: 上一個按鈕文字
nextText: "Next", // String: 下一個按鈕文字
// Secondary Navigation
keyboard: true, // Boolean: 是否開啟鍵盤左（←）右（→）控制
multipleKeyboard: false, // Boolean: 是否允許鍵盤控制多個 slide
mousewheel: true, // Boolean: 是否開啟滑鼠滾輪控制
pausePlay: false, // Boolean: 是否建立暫停與播放按鈕
pauseText: 'Pause', // String: 暫停按鈕文字
playText: 'Play', // String: 播放按鈕文字
// Special properties
controlsContainer: "", // jQuery Object/Selector
manualControls: "", // jQuery Object/Selector 自訂控制 slider 的元素，
// 如 "#tabs-nav li img"，導航數量和 slide 數量一樣
sync: "", // Selector: 關聯 slide 與 slide 之間的操作。
asNavFor: "", // Selector: Internal property exposed for turning the slider into a thumbnail navigation for another slider
// Carousel Options
itemWidth: 0, // Integer: slide 寬度，多個同時滾動時設定
itemMargin: 0, // Integer: slide 間距
minItems: 1, // Integer: 最少顯示 slide 數, 與 `itemWidth` 相關
maxItems: 0, // Integer: 最多顯示 slide 數, 與 `itemWidth` 相關
move: 0, // Integer: 一次滾動移動的 slide 數量，0 - 滾動可見的 slide
// Callback API
start: function(){}, // Callback: function(slider) - 初始化完成的回調
before: function(){}, // Callback: function(slider) - 每次滾動開始前的回調
after: function(){}, // Callback: function(slider) - 每次滾動完成後的回調
end: function(){}, // Callback: function(slider) - 執行到最後一個 slide 的回調
added: function(){}, // Callback: function(slider) - slide 添加時觸發
removed: function(){} // Callback: function(slider) - slide 被移除時觸發
// Amaze UI 擴充參數
playAfterPaused: null // Integer: ms 使用者停止操作多長時間以後重新開始自動播放
}
效果如下，很不錯的效果，代碼也很少，簡單易懂。
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
