swiper实现轮播左右三个图片大图组中左右出现小角

最新推荐文章于 2024-02-19 17:17:37 发布

小小笔记本

最新推荐文章于 2024-02-19 17:17:37 发布

阅读量1.2k

点赞数

分类专栏：总结文章标签： vue.js javascript

本文链接：https://blog.csdn.net/weixin_43584356/article/details/104675808

版权

总结专栏收录该内容

14 篇文章 0 订阅

订阅专栏

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>photo</title>
    <link rel="stylesheet" href="./swiper.min.css">
    <style>
        main {
            width: 750px;
            margin: 0 auto;
            overflow: hidden;
        }
        /* img {
            width: 610px;
        } */
        .swiper-container {
            margin-top: 20px;
            width: 750px;
            height: 100vh;
            margin-bottom: 53px;
            overflow: visible!important;
        }
        .swiper-container .swiper-wrapper .swiper-slide{ width: 620px; }
        .swiper-container .swiper-wrapper .swiper-slide img{width: 100%;  }
        .swiper-container .swiper-wrapper .swiper-slide-prev{ margin-top: 15vh; height: 549px!important;}
        .swiper-container .swiper-wrapper .swiper-slide-prev img{ height: 549px!important;}
        .swiper-container .swiper-wrapper .swiper-slide-next{ margin-top: 15vh; height: 549px!important;}
        .swiper-container .swiper-wrapper .swiper-slide-next img{ height: 549px!important;}
        .swiper-container .swiper-wrapper .swiper-slide-active{ width: 620px;}

        .swiper-pagination{
            bottom: -30px!important;
        }
        .swiper-pagination .swiper-pagination-bullet{width: 12px; height: 12px; background: #ff1e1e;}
        .swiper-pagination .swiper-pagination-bullet-active{width: 21px; height: 12px; background: #e75230; border-radius: 6px;}
    </style>
</head>
<body>
    <main>
        <div class="swiper-container">
            <div class="swiper-wrapper">
                <div class="swiper-slide"><img src="./img/1.png" alt=""></div>
                <div class="swiper-slide"><img src="./img/2.png" alt=""></div>
                <div class="swiper-slide"><img src="./img/3.png" alt=""></div>
                <div class="swiper-slide"><img src="./img/4.png" alt=""></div>
            </div>
            <!-- 如果需要分页器 -->
            <!-- <div class="swiper-pagination"></div> -->
            
            <!-- 如果需要导航按钮 -->
            <!-- <div class="swiper-button-prev"></div>
            <div class="swiper-button-next"></div> -->
            
            <!-- 如果需要滚动条 -->
            <!-- <div class="swiper-scrollbar"></div> -->
        </div>
    </main>
    <script src="./swiper.min.js"></script>
    <script>
        var mySwiper = new Swiper ('.swiper-container', {
            direction: 'horizontal',
            loop: true,
            autoplay: true,
            slidesPerView: "auto",
            centeredSlides:true,
            spaceBetween: 30,
            // 如果需要分页器
            // pagination: '.swiper-pagination',
        })
    </script>
</body>
</html>
`

这是dom实现还是样式写的额

vue项目导入swiper 全局引入

<template>
   <main>
        <AppHeader :name="title"></AppHeader>
        <div class="main">

            <div class="swiper-container">
                <div class="swiper-wrapper" >
                    <div class="swiper-slide" v-for="item in list.imgs" :key="item.id">
                        <!-- 水印 -->
                         <!-- <img :src="item + '?x-oss-process=image/watermark,image_5a6i54Wn5rC05Y2wLnBuZz94LW9zcy1wcm9jZXNzPWltYWdlL3Jlc2l6ZSxQXzYw,g_south,y_100,/resize,w_610'" alt=""> -->
                         <img :src="item + '?x-oss-process=image/resize,w_610'" alt="">
                    </div>
                </div>
            </div>
        </div>
        <div class="flex ac jc h110">
            <div class="botton flex ac jc"  @click="tolist('1')">下载照片</div>
        </div>
   </main>
</template>

<script>
import AppHeader from "./Tabbar/AppHeader";
import { Toast,Indicator } from "mint-ui";
import Swiper from "swiper"


export default {
    components: { AppHeader },
    name:'photodaownload',
    data() {
        return{
            title: '图片下载', 
            id: '', // 订单id
            token: '',
            list: [], // 数据
            status: 1, // 1单张图 2多张图数组
            activePopup: false, /// 原图 水印 
            img: '', 
        }
    },

    mounted() {
        const ts = this;
        Indicator.close();


        var ids = ts.$route.query.id; /// 传参数获取
            ts.id = ids;
            
        if (JSON.parse(localStorage.getItem('userInfo'))) {
            ts.token = JSON.parse(localStorage.getItem('userInfo')).token;
        } else {
            ts.token = ''
        }
        ts.post();
    },
    watch: {
        list() {
            this.$nextTick(() => {
                var mySwiper = new Swiper ('.swiper-container', {
                    direction: 'horizontal',
                    loop: true,
                    autoplay: true,
                    slidesPerView: "auto",
                    centeredSlides:true,
                    spaceBetween: 20,
                    speed:500,
                })
            });
        }
    },
    methods: {
        post() {
            const ts = this;

            ts.$axios.post(ts.baseURL + "/h5/order/getOrderImg", {token: ts.token, order_id: ts.id}).then(res => {
                if (res.data.code == 1) {
                    ts.list = res.data.data
                }
            });
        },
        tolist(e) {
            const ts = this;
            ts.$router.push({path: '/photoshow', query: { id : ts.id, status: e }})
        }
    }
}
</script>

<style scoped>
    .main {
        margin-top: 130px;
    }

    .title img{
        width: 100%;
        height: 120px;
    }
    .content {
        margin: 20px;
        padding: 20px;
        background:rgba(255,255,255,1);
        border-radius:10px;
    }
    .content:nth-last-child(1) {
        margin-bottom: 130px;
    }
    img {
        width: 50%;
    }
    .download {
        width:170px;
        height:54px;
        background:rgba(215,9,47,1);
        border-radius:10px;
        color: #fff;
        font-size: 26px;
    }
    .h110 {
        position: fixed;
        bottom: 0;
        width:750px;
        height:110px;
        padding: 30px;
        background:rgba(255,255,255,1);
        box-shadow:0px 0px 10px 0px rgba(1,7,16,0.08);
    }
    .botton {
        width:210px;
        height:70px;
        background:rgba(216,9,48,1);
        border-radius:10px;
        font-size: 32px;
        color: #fff;
    }
    .table {
        width: 750px;
        background: #fff;
        margin-bottom: 30px;
        font-size: 28px;
    }
    .downphoto {
        margin: 0 20px;
        height: 100px;
    }
    .bb1 {
        border-bottom: 1.2px solid #eee;
    }
    .swiper-container {
        margin-top: 20px;
        width: 750px;
        margin-bottom: 53px;
    }
    .swiper-container .swiper-wrapper .swiper-slide{ width: 620px; }
    .swiper-container .swiper-wrapper .swiper-slide img {width: 100%;}
    .swiper-container .swiper-wrapper .swiper-slide-prev{margin:auto; height: 300px!important; border-radius: 20px;}
    .swiper-container .swiper-wrapper .swiper-slide-prev img{ height: 300px!important; border-radius: 20px;}
    .swiper-container .swiper-wrapper .swiper-slide-next{margin:auto;; height: 300px!important; border-radius: 20px;}
    .swiper-container .swiper-wrapper .swiper-slide-next img{ height: 300px!important; border-radius: 20px;}
    .swiper-container .swiper-wrapper .swiper-slide-active{ width: 620px; margin:auto;}

    .swiper-pagination{
        bottom: -30px!important;
    }
    .swiper-pagination .swiper-pagination-bullet{width: 12px; height: 12px;}
    .swiper-pagination .swiper-pagination-bullet-active{width: 21px; height: 12px; background: #e75230; border-radius: 6px;}
    </style>
```后面的样式很关键