免費(fèi)AI編程助手
在之前小編講過那么多有關(guān)于html5中的canvas之后今天我們就來(lái)說(shuō)說(shuō)有關(guān)于AmazeUI中“在html5中使用AmazeUI實(shí)現(xiàn)圖片輪播效果案例分享！”這方面的相關(guān)內(nèi)容分享吧！
今天要講得是圖片輪播，感覺這個(gè)應(yīng)該能夠幫到大家，再此整理整理。
<!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>上面引用到的文件其實(shí)可以不需要那么多，不過都是官方文件中的文件。
主要是控件的屬性：
{
animation: "slide", // String: ["fade"|"slide"]，動(dòng)畫效果
easing: "swing", // String: 滾動(dòng)動(dòng)畫計(jì)時(shí)函數(shù)
direction: "horizontal", // String: 滾動(dòng)方向 ["horizontal"|"vertical"]
reverse: false, // Boolean: 翻轉(zhuǎn) slide 運(yùn)動(dòng)方向
animationLoop: true, // Boolean: 是否循環(huán)播放
smoothHeight: false, // Boolean: 當(dāng) slide 圖片比例不一樣時(shí)
// "true": 父類自動(dòng)適應(yīng)圖片高度
// "false": 不自動(dòng)適應(yīng)，父類高度為圖片的最高高度，默認(rèn)為false
startAt: 0, // Integer: 開始播放的 slide，從 0 開始計(jì)數(shù)
slideshow: true, // Boolean: 是否自動(dòng)播放
slideshowSpeed: 5000, // Integer: ms 滾動(dòng)間隔時(shí)間
animationSpeed: 600, // Integer: ms 動(dòng)畫滾動(dòng)速度
initDelay: 0, // Integer: ms 首次執(zhí)行動(dòng)畫的延遲
randomize: false, // Boolean: 是否隨機(jī) slide 順序
// Usability features
pauseOnAction: true, // Boolean: 用戶操作時(shí)停止自動(dòng)播放
pauseOnHover: false, // Boolean: 懸停時(shí)暫停自動(dòng)播放
useCSS: true, // Boolean: 是否使用 css3 transition
touch: true, // Boolean: 允許觸摸屏觸摸滑動(dòng)滑塊
video: false, // Boolean: 使用視頻的 slider，防止 CSS3 3D 變換毛刺
// Primary Controls
controlNav: true, // Boolean: 是否創(chuàng)建控制點(diǎn)
directionNav: true, // Boolean: 是否創(chuàng)建上/下一個(gè)按鈕（previous/next）
prevText: "Previous", // String: 上一個(gè)按鈕文字
nextText: "Next", // String: 下一個(gè)按鈕文字
// Secondary Navigation
keyboard: true, // Boolean: 是否開啟鍵盤左（←）右（→）控制
multipleKeyboard: false, // Boolean: 是否允許鍵盤控制多個(gè) slide
mousewheel: true, // Boolean: 是否開啟鼠標(biāo)滾輪控制
pausePlay: false, // Boolean: 是否創(chuàng)建暫停與播放按鈕
pauseText: 'Pause', // String: 暫停按鈕文字
playText: 'Play', // String: 播放按鈕文字
// Special properties
controlsContainer: "", // jQuery Object/Selector
manualControls: "", // jQuery Object/Selector 自定義控制 slider 的元素，
// 如 "#tabs-nav li img"，導(dǎo)航數(shù)量和 slide 數(shù)量一樣
sync: "", // Selector: 關(guān)聯(lián) slide 與 slide 之間的操作。
asNavFor: "", // Selector: Internal property exposed for turning the slider into a thumbnail navigation for another slider
// Carousel Options
itemWidth: 0, // Integer: slide 寬度，多個(gè)同時(shí)滾動(dòng)時(shí)設(shè)置
itemMargin: 0, // Integer: slide 間距
minItems: 1, // Integer: 最少顯示 slide 數(shù), 與 `itemWidth` 相關(guān)
maxItems: 0, // Integer: 最多顯示 slide 數(shù), 與 `itemWidth` 相關(guān)
move: 0, // Integer: 一次滾動(dòng)移動(dòng)的 slide 數(shù)量，0 - 滾動(dòng)可見的 slide
// Callback API
start: function(){}, // Callback: function(slider) - 初始化完成的回調(diào)
before: function(){}, // Callback: function(slider) - 每次滾動(dòng)開始前的回調(diào)
after: function(){}, // Callback: function(slider) - 每次滾動(dòng)完成后的回調(diào)
end: function(){}, // Callback: function(slider) - 執(zhí)行到最后一個(gè) slide 的回調(diào)
added: function(){}, // Callback: function(slider) - slide 添加時(shí)觸發(fā)
removed: function(){} // Callback: function(slider) - slide 被移除時(shí)觸發(fā)
// Amaze UI 擴(kuò)展參數(shù)
playAfterPaused: null // Integer: ms 用戶停止操作多長(zhǎng)時(shí)間以后重新開始自動(dòng)播放
}效果如下，很不錯(cuò)的效果，代碼也很少，簡(jiǎn)單易懂。
那么以上的內(nèi)容就是有關(guān)于：“在html5中使用AmazeUI實(shí)現(xiàn)圖片輪播效果案例分享！”這方面的全部?jī)?nèi)容，更多有關(guān)于html5這方面的相關(guān)知識(shí)我們都可以在W3Cschool中進(jìn)行學(xué)習(xí)和了解！
