AmazeUI 图片轮播模块FlexSlider笔记
本想根據(jù)AmazeUI 的JS插件庫?輪播圖（FlexSlider） 的教程，測(cè)試教程中的demo，copy代碼，引入相關(guān)包，
問題1：發(fā)現(xiàn)頁面圖片卻不顯示。
思路1：F12頁面img的圖片能預(yù)覽，郁悶了一會(huì)，跑去官方github項(xiàng)目讀文檔才發(fā)現(xiàn)
解決1：
"slides am-slides" --改-->slides
問題2：點(diǎn)擊輪播圖片沒效果。
思路2：斷點(diǎn)調(diào)試,發(fā)現(xiàn)jquery.flexslider.js，對(duì)*.flexslider('addSlide',**的 參數(shù)addSlide方法，沒有作用，搜索addSlide，發(fā)現(xiàn)源碼
1069slider.addSlide = function(obj, pos) {var $obj = $(obj);slider.count += 1;slider.last = slider.count - 1;*****仔細(xì)查看文檔才知道，怎么調(diào)用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：再次動(dòng)態(tài)添加輪播圖片，內(nèi)容添加成功，添加的圖片卻空白
思路3：在li中找不同，發(fā)現(xiàn)有個(gè)style樣式，動(dòng)態(tài)添加的，和初始化的li不一樣
解決3：動(dòng)態(tài)添加html的字符串，需加上注意加：display: block;? ? ?'<li style="display: block;"><img
軟件版本：FlexSlider-2.7.1
? ? ? ? ? ? ? ? ? ama-2.7.2
原因推測(cè)：教程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()// 關(guān)鍵點(diǎn)：獲取內(nèi)部slider元素var slider=$flexslider.data('flexslider');var getSlide = function () {var count = slider.count; // 獲取當(dāng)前輪播圖片數(shù)量// 注意加：display: block; 初始化默認(rèn)會(huì)添加，而動(dòng)態(tài)添加沒有？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') {// 注意：為了調(diào)用addSlide()方法// 需通過jQuery.data()方法在回調(diào)API之外訪問slider元素（查看github項(xiàng)目才發(fā)現(xiàn)的）slider.addSlide(getSlide());} else {var count = slider.count;count > 1 && slider.removeSlide(count-1);}});});</script> </body></html>?
總結(jié)
以上是生活随笔為你收集整理的AmazeUI 图片轮播模块FlexSlider笔记的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 移动端h5实现摇一摇抽奖
- 下一篇： 【C++心路历程18】NOIP2016的