swiper轮播图带页数版本

hy3528

已于 2022-03-23 13:55:08 修改

阅读量789

点赞数 2

分类专栏： html swiper 文章标签：前端

于 2020-05-25 15:49:31 首次发布

本文链接：https://blog.csdn.net/hy3528/article/details/106334839

版权

html 同时被 2 个专栏收录

73 篇文章 1 订阅

订阅专栏

swiper

2 篇文章 0 订阅

订阅专栏

温馨提示：引用链接为公司内部链接，有可能会失效，可以将资源下载到本地引入或者使用官方链接

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="https://cdn.suoluomei.com/common/js2.0/npm/vant@2.2/lib/index.css">
    <link rel="stylesheet" href="https://cdn.suoluomei.com/common/js2.0/swiper/v4.3.0/swiper.min.css">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <title>产品详情</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        [v-cloak] {
            display: none !important;
        }

        /* top */
        .ltop {
            display: flex;
            align-items: center;
            font-size: .33rem;
            font-weight: 500;
            height: 0.83rem;
            padding: 0 0.208rem;
            border-bottom: .02rem solid #F0F0F0;
            background: white;
        }

        .ltop img {
            width: 0.1765rem;
        }

        .ltop span {
            flex: 1;
            text-align: center;
        }

        /* top end */
        .swiper-img {
            width: 100%;
        }

        .page {
            font-size: .28rem;
            position: absolute;
            bottom: .4rem;
            z-index: 99;
            right: .4rem;
            width: .9rem;
            text-align: center;
            background: rgba(0, 0, 0, 0.4);
            border-radius: .38rem;
            color: white;
            padding: .04rem 0;
        }

        .page>span {}
    </style>
</head>

<body>
    <div v-cloak id="Vue">
        <!-- top -->
        <div class="ltop">
            <img onclick="javascript :history.back(-1);"
                src="http://sucai.suoluomei.cn/sucai_zs/images/20200228170103-%E5%BD%A2%E7%8A%B612%402x.png" alt="">
            <span>产品详情</span>
        </div>
        <!-- top end -->
        <!-- 轮播图1 -->
        <div class="swiper-container">
            <div class="swiper-wrapper">
                <div class="swiper-slide" v-for="(item,index) in swiperlist" :key="index">
                    <img class="swiper-img" :src="item.img" alt="">
                </div>
            </div>
            <div class="page">
                <span>{{swiperid+1}}/{{swiperlen}}</span>
            </div>
        </div>
        <!-- 轮播图1 end -->
    </div>
</body>
<script src="https://cdn.suoluomei.com/common/js/jquery-2.1.4.min.js"></script>
<script src="https://cdn.suoluomei.com/common/js2.0/vue/v2.5.16/vue.js"></script>
<script src="https://cdn.suoluomei.com/common/js2.0/swiper/v4.3.0/swiper.min.js"></script>
<script src="https://cdn.suoluomei.com/common/js2.0/npm/vant@2.2/lib/vant.min.js"></script>
<script>
    var swiperid = 0
    new Vue({
        el: "#Vue",
        data: {
            swiperlist: [
                {
                    img: "https://sucai.suoluomei.cn/sucai_zs/images/20200522161813-cxxplb1_03.jpg"
                },
                {
                    img: "https://sucai.suoluomei.cn/sucai_zs/images/20200522161813-cxxplb1_03.jpg"
                },
                {
                    img: "https://sucai.suoluomei.cn/sucai_zs/images/20200522161813-cxxplb1_03.jpg"
                },
                {
                    img: "https://sucai.suoluomei.cn/sucai_zs/images/20200522161813-cxxplb1_03.jpg"
                }
            ],
            swiperid: swiperid,
            swiperlen: ""
        },
        methods: {
            swiper(id) {
                this.swiperid = id
            }

        },
        created() {
            let that = this
            that.swiperlen = that.swiperlist.length
            that.$nextTick(function () {
                var swiper = new Swiper('.swiper-container', {
                    initialSlide: 0,
                    keyboard: true,
                    loop: false,
                    autoplay: false,
                    slidesPerView: 1,
                    observer: true,//修改swiper自己或子元素时，自动初始化swiper
                    observeParents: true,//修改swiper的父元素时，自动初始化swiper
                    pagination: {
                        el: '.swiper-pagination',
                        clickable: true,
                    },
                    on: {
                        slideChange: function () {
                            console.log(this.activeIndex)
                            swiperid = this.activeIndex
                            that.swiper(swiperid)
                        },
                    },
                });
            })
            //     let that = this
            // $.ajax({
            //     type: "get",	//请求方式
            //     async: false,
            //     url: "",
            //     data: {},		//传值给后台
            //     dataType: "json",
            //     success: function (res) {
            //         console.log(res)
            //
            //     },
            // });
        }
    })
</script>
<script>
        (function (win, doc) {
            if (!win.addEventListener) return;
            var html = document.documentElement;

            function setFont() {
                var cliWidth = html.clientWidth;
                if (cliWidth > 750) {
                    cliWidth = 750;
                }
                html.style.fontSize = 100 * (cliWidth / 750) + 'px';
            }
            win.addEventListener('resize', setFont, false)
            doc.addEventListener('DOMContentLoaded', setFont, false)
        })(window, document);

    // $(document).ready(function () {
    //     var swiper = new Swiper('.swiper-container', {
    //         initialSlide: 0,
    //         keyboard: true,
    //         loop: false,
    //         autoplay: false,
    //         slidesPerView: 1,
    //         observer: true,//修改swiper自己或子元素时，自动初始化swiper
    //         observeParents: true,//修改swiper的父元素时，自动初始化swiper
    //         pagination: {
    //             el: '.swiper-pagination',
    //             clickable: true,
    //         },
    //         on: {
    //             slideChange: function () {
    //                 console.log(this.activeIndex)
    //                 swiperid = this.activeIndex
    //             },
    //         },
    //     });
    // })
</script>

</html>

效果图
在这里插入图片描述

hy3528

关注

2
点赞
踩
1

收藏

觉得还不错? 一键收藏
1
评论
swiper轮播图带页数版本

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <link rel="stylesheet" href="https://cdn.suoluomei.com/common/js2.0/npm/vant@2.2/lib/index.css"> <link rel="stylesheet" href="https://cdn.suoluomei
复制链接

扫一扫

专栏目录