欢迎访问 生活随笔！
TAG聚合

生活随笔

当前位置： 首页 > 编程资源 > 编程问答 >内容正文

编程问答

AmazeUI 图片轮播模块FlexSlider笔记

发布时间：2023/12/29 编程问答 50 豆豆
生活随笔 收集整理的这篇文章主要介绍了 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笔记的全部内容，希望文章能够帮你解决所遇到的问题。

    如果觉得生活随笔网站内容还不错，欢迎将生活随笔推荐给好友。