轮播图

最新推荐文章于 2019-08-20 09:36:26 发布

Acitylion

最新推荐文章于 2019-08-20 09:36:26 发布

阅读量169

点赞数

分类专栏：工作日志

本文链接：https://blog.csdn.net/Acitylion/article/details/83416773

版权

工作日志专栏收录该内容

30 篇文章 0 订阅

订阅专栏

工作日志随手笔记仅供参考

用的的是swiper 插件还要引 js 跟 css 文件

https://www.swiper.com.cn/

 .swiper-container {
            width: 100%;
            height: 100%;
            margin-left: auto;
            margin-right: auto;
        }

        .swiper-slide {
            text-align: center;
            font-size: 18px;
            background: #fff;

            /* Center slide text vertically */
            display: -webkit-box;
            display: -ms-flexbox;
            display: -webkit-flex;
            display: flex;
            -webkit-box-pack: center;
            -ms-flex-pack: center;
            -webkit-justify-content: center;
            justify-content: center;
            -webkit-box-align: center;
            -ms-flex-align: center;
            -webkit-align-items: center;
            align-items: center;
        }
        .swiper-container {
            width: 100%;
            height: 180px!important;
        }
        .swiper-container img {
            width: 100%;
            display: block;
            height: 100%;
        }

<div class="swiper-container"></div>
    <script type="text/html" id="lunbo">
        <div class="swiper-wrapper">
            {MBTS each MBTE}
            <div class="swiper-slide">
                <img src="  {MBTS $value.img MBTE}" alt="">
            </div>
            {MBTS /each MBTE}
        </div>
        <!-- Add Pagination -->
        <div class="swiper-pagination"></div>
    </script>

  <script>
        template.config('openTag', '{MBTS');
        template.config('closeTag', 'MBTE}');

    </script>

//轮播图
            Ajax({
                data: {
                    type: 'spellgroup_index',//拼团
                },
                url: "******************",
                type: 'post',
                loading: false,
                success: function (res) {
                    console.log(res);
                    if (res.code == 1) {
                        var lunbo = "lunbo";
                        var tem_lunbo = template(lunbo, res.result);
                        $(".swiper-container").html(tem_lunbo);

                        var swiper = new Swiper('.swiper-container', {
                            autoplay: 3000,
                            speed: 300,
                            loop: true,
                            pagination: {
                                el: '.swiper-pagination',
                            },
                            observer:true,//修改swiper自己或子元素时，自动初始化swiper
                            observeParents:true, //修改swiper的父元素时，自动初始化swiper
                            autoplayDisableOnInteraction : false
                        });
                    } else {

                    }
                }
            });