AmazeUI 图片轮播模块FlexSlider笔记

本想根据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，发现源码

 1069slider.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>

AmazeUI 图片轮播模块FlexSlider笔记相关推荐

【APICloud系列|26】UIScrollPicture 模块(图片轮播)的实现
导读:UIScrollPicture 模块是一个图片轮播模块,只需传入一组图片地址,即可实现图片轮播效果.同时演示了如何使用UIScrollPicture实现APP引导页功能使用模块前需在控制台添加 ...
Flexslider图片轮播、文字图片相结合滑动切换效果
Flexslider是一款基于的jQuery内容滚动插件.它能让你轻松的创建内容滚动的效果,具有非常高的可定制性.开发者可以使用Flexslider轻松创建各种图片轮播效果.焦点图效果.图文混排滚动效 ...
FlexSlider图片轮播切换jQuery插件
下载地址 flexSlider是一款强大的图片轮播插件.参数说明animation: "slide", // String: ["fade" ...
jQuery 图片轮播插件
网站项目必备--12款经典的白富美型 jQuery 图片轮播插件图片轮播是网站中的常用功能,用于在有限的网页空间内展示一组产品图片或者照片,同时还有非常吸引人的动画效果.本文向大家推荐12款实用的 ...
html图片展示插件,12款经典的白富美型—jquery图片轮播插件—前端开发必备
图片轮播是网站中的常用功能,用于在有限的网页空间内展示一组产品图片或者照片,同时还有非常吸引人的动画效果.本文向大家推荐12款实用的 jQuery 图片轮播效果插件,帮助你在你的项目中加入一些效果精美 ...
12款经典的白富美型 jQuery 图片轮播插件
图片轮播是网站中的常用功能,用于在有限的网页空间内展示一组产品图片或者照片,同时还有非常吸引人的动画效果.本文向大家推荐12款实用的 jQuery 图片轮播效果插件,帮助你在你的项目中加入一些效果精 ...
网站项目必备——12款经典的白富美型 jQuery 图片轮播插件
图片轮播是网站中的常用功能,用于在有限的网页空间内展示一组产品图片或者照片,同时还有非常吸引人的动画效果.本文向大家推荐12款实用的 jQuery 图片轮播效果插件,帮助你在你的项目中加入一些效果精美 ...
网站项目必备——12款白富美型 jQuery 图片轮播插件
转自:http://www.cnblogs.com/lhb25/archive/2013/01/06/jquery-image-carousel-effect.html 图片轮播是网站中的常用功能,用 ...
淘宝装修：第一日 —— 图片轮播
先添加一个自定义内容区,进入源码编辑,如下图所示: 添加源码如下: <TABLE border=0 cellSpacing=0 cellPadding=0 width=773 height=22 ...

AmazeUI 图片轮播模块FlexSlider笔记

AmazeUI 图片轮播模块FlexSlider笔记相关推荐

最新文章

热门文章