本想根據AmazeUI 的JS插件庫 輪播圖(FlexSlider) 的教程,測試教程中的demo,copy代碼,引入相關包,
問題1:發現頁面圖片卻不顯示。
思路1:F12頁面img的圖片能預覽,鬱悶了一會,跑去官方github項目讀文檔才發現
解決1:
- 教程class是"am-slider am-slider-default",官方文檔要求:flexslider
-
"slides am-slides" --改-->slides
問題2:點擊輪播圖片沒效果。
思路2:斷點調試,發現jquery.flexslider.js,對*.flexslider('addSlide',**的 參數addSlide方法,沒有作用,搜索addSlide,發現源碼
1069
slider.addSlide = function(obj, pos) {
var $obj = $(obj);
slider.count += 1;
slider.last = slider.count - 1;
*****
仔細查看文檔才知道,怎麼調用addSlide方法
The slider element is now accessible outside of the callback API via the jQuery .data() method. Example use: $('#slider').data('flexslider')
解決2:
$('#demo-slider-0').data('flexslider').addSlide(getSlide());
問題3:再次動態添加輪播圖片,內容添加成功,添加的圖片卻空白
思路3:在li中找不同,發現有個style樣式,動態添加的,和初始化的li不一樣
解決3:動態添加html的字符串,需加上注意加:display: block; '<li style="display: block;"><img
軟件版本:FlexSlider-2.7.1
ama-2.7.2
原因推測:教程FlexSlider版本,和最新下載的FlexSlider版本不一致,,或下載amazeUI的整合過插件?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link rel="stylesheet" href="../amazeui.css">
<link rel="stylesheet" href="./css/flexslider.css">
<script src="../jquery.js"></script>
<!-- <script src="../amazeui.js"></script> -->
<script src="jquery.flexslider.js"></script>
</head>
<body>
<!-- 需要添加 flexslider -->
<div class="flexslider " id="demo-slider-0">
<!-- 需要添加 slides -->
<ul class="slides ">
<li><img src="http://s.amazeui.org/media/i/demos/bing-1.jpg" /></li>
<li><img src="http://s.amazeui.org/media/i/demos/bing-2.jpg" /></li>
</ul>
</div>
<div class="am-btn-toolbar">
<button type="button" class="am-btn am-btn-primary js-demo-slider-btn" data-action="add">添加 slide</button>
<button type="button" class="am-btn am-btn-danger js-demo-slider-btn" data-action="remove">移除 slide</button>
</div>
<script>
$(function () {
var $flexslider = $('#demo-slider-0');
// js初始化 flexlider 非Data API:data-am-flexslider初始化,需要引入amazeui.js
$flexslider.flexslider()
// 關鍵點:獲取內部slider元素
var slider=$flexslider.data('flexslider');
var getSlide = function () {
var count = slider.count; // 獲取當前輪播圖片數量
// 注意加:display: block; 初始化默認會添加,而動態添加沒有?
return '<li style="display: block;"><img src="http://s.amazeui.org/media/i/demos/bing-'+(count+1)+'.jpg" /></li>';
};
$('.js-demo-slider-btn').on('click', function () {
var action = this.getAttribute('data-action');
if (action === 'add') {
// 注意:爲了調用addSlide()方法
// 需通過jQuery.data()方法在回調API之外訪問slider元素(查看github項目才發現的)
slider.addSlide(getSlide());
} else {
var count = slider.count;
count > 1 && slider.removeSlide(count-1);
}
});
});
</script>
</body>
</html>