AmazeUI 图片轮播模块FlexSlider笔记

最新推荐文章于 2024-08-12 08:43:27 发布

眨眼睛1024

最新推荐文章于 2024-08-12 08:43:27 发布

阅读量1.7k

点赞数

文章标签： addSlide $slider.flexslider('addSlide' 动态添加轮播图 flexslider

本文链接：https://blog.csdn.net/weixin_38981413/article/details/82775494

版权

本想根据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>