轮播图1/3样式轮播图，模仿淘宝详情页图片胶囊式轮播

最新推荐文章于 2024-04-15 10:28:24 发布

月落星河°

最新推荐文章于 2024-04-15 10:28:24 发布

阅读量1.1k

点赞数

分类专栏： JavaScript 文章标签：轮播图 swiper 移动端轮播图商品展示轮播图

本文链接：https://blog.csdn.net/wangzongyang1025_/article/details/87909661

版权

JavaScript 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

首先我们先来看一下完成后的样式

在这里插入图片描述

1、用到的插件是swiper插件

swiper官网：https://www.swiper.com.cn/

2、源代码（因为用的是第三方插件，所以就直接上源码了）

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>No Matter的博客</title>
    <link rel="stylesheet" href="./css/base.css">
    <link rel="stylesheet" href="./css/swiper.min.css">
    <style>
       html,body {
           width: 100%;
           position: relative;
       }
        .share-download {
            width: 100%;
            height: .88rem;
            line-height: .88rem;
            background-color: #333333;
            opacity: 0.6;
            position: a;
            top: 0;
            z-index: 2;
            color: #fff;
            font-size: 13px;
            padding-left: .3rem;
            box-sizing: border-box;
        }
        .share-download img {
             width: .5rem;
             height: .5rem;
             vertical-align: middle;
         
        }
        .share-download .btn {
            display: inline-block;
            width: 75px;
            height: 25px;
            line-height: 25px;
            font-size: 12px;
            text-align: center;
            position: absolute;
            right: .1rem;
            top:.2rem;
            background-image: linear-gradient(to right, #FF8D00 , #FF6000);
            border-radius: 13px;
        }
    
        .swiper-container {
            width: 100%;
            height: 8.38rem;
            margin: 0px auto;
        }

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

        .swiper-pagination {
            left: auto;
            right: 7px;
            bottom: 7px;
            width: auto;
            padding: 2px 7px;
            border-radius: 10px;
            color: #fff;
            background: rgba(0, 0, 0, .3);
        }

        .swiper-slide img {
            width: 100%;
            height: 100%;
        }

        .share-price {
            color: #FF5656;
            font-size: 20px;
            font-weight: bold;
            margin-top: .4rem;
            margin-left: .3rem;
        }

        .share-introduction {
            height: 100%;
            margin-top: .2rem;
            margin-left: .3rem;
            margin-right: .2rem;
            margin-bottom: .3rem;
            line-height: 1.4;
            color: #333333;
            font-weight: bold;
        }

        .bar {
            width: 100%;
            height: .2rem;
            background-color: #F8F8F8;
        }
        .share-select {
            width: 100%;
            height: 100%;
        }
        .share-select ul {
            margin-top: .2rem;
            margin-left: .3rem;
        }
        .share-select ul li{
             line-height: 2.2;
        }
        .share-select ul li span:nth-child(1){
             color: #999999;
             margin-right: .2rem;
        }
        .share-select ul li span:nth-child(3){
            float: right;
            margin-right: .3rem;
        }
        .share-title {
            display: flex;
            justify-content: center;
            color: #999999;
            margin-top: .28rem;
            
        }
        .share-title span{
            display: inline-block;
            margin: 0 10px;

        }
        .line {
            display: inline-block;;
            width:.6rem;;
            height: .02rem;
            background-color: #999999;
            margin-bottom: 2px;
        }
        .dot {
            display: inline-block;
            width: .1rem;
            height: .1rem;
            background-color: #999999;
            border-radius: 2px;;
        }
        .share-introduction2 {
            height: 100%;
            margin-top: .2rem;
            margin-left: .3rem;
            margin-right: .2rem;
            margin-bottom: .3rem;
            line-height: 1.4;
            color: #333333;
        }
        .share-show-img {
            width: 100%;
            height: 7.8rem;
        }
        .share-show-img img {
            width: 100%;
            height: 100%;
        }
    </style>
</head>

<body>
    <!-- 立即下载 -->
    <div class="share-download"><span>给您推荐<img style="border-radius: 20px;" src="https://profile.csdnimg.cn/7/9/4/1_wangzongyang1025_" alt="" srcset="">No Matter的博客<span> <span class="btn">点击进入</span></div>
    <!-- Swiper -->
    <div class="swiper-container">
        <div class="swiper-wrapper">
            <div class="swiper-slide"><img src="./img/WechatIMG3328.png" alt="" srcset=""></div>
            <div class="swiper-slide"><img src="./img/WechatIMG3329.png" alt="" srcset=""></div>
            <div class="swiper-slide"><img src="./img/WechatIMG3330.png" alt="" srcset=""></div>
            <div class="swiper-slide"><img src="./img/WechatIMG3331.png" alt="" srcset=""></div>
        </div>
        <!-- Add Pagination -->
        <div class="swiper-pagination"></div>

    </div>
    <!-- 价格 -->
    <div class="share-price">¥ 509-699</div>
    <!-- 详情 -->
    <div class="share-introduction">Dior迪奥Jadore真我女士香水持久淡香EDP迷人正品50ml/75ml/100mlDior迪奥Jadore真我女士香水持久淡香EDP迷人
        正品50ml/75ml/100ml</div>
        <div class="bar"></div>
        <!-- 分享列表-->
        <div class="share-select">
             <ul>
                  <li><span>选择</span><span>颜色 净含量</span><span><img src="./img/right.png" alt="" srcset=""></span></li>
                  <li><span>运费</span><span>满100元包邮</span></li>
             </ul>
        </div>
        <div class="bar"></div>
        <!-- 商品介绍开始 -->
        <div class="share-title"><span><i class="line"></i><i class="dot"></i></span>商品介绍<span><i class="dot"></i><i class="line"></i></span></div>
        <div class="share-introduction2">这是商品的介绍,,,,,,,这是商品的介绍,,,,,,,这是商品的介绍,,,,,,,这是商品的介绍,,,,,,,这是商品的介绍</div>
        <!-- 商品展示图 -->
        <div class="share-show-img">
            <img src="./img/WechatIMG3328.png" alt="" srcset="">
        </div>
    <script src="./js/jquery-3.4.1.min.js"></script>
    <script src="./js/flexible.min.js"></script>
    <script src="./js/swiper.min.js"></script>
    <script>
        var swiper = new Swiper('.swiper-container', {
            nextButton: '.swiper-button-next',
            prevButton: '.swiper-button-prev',
            pagination: '.swiper-pagination',
            paginationType: 'fraction'
        });
    </script>
</body>

</html>

核心代码解析

注释：下方代码 paginationType：fraction，就是通过它去将swiper中组件的样式改变成别的类型，如图：
在这里插入图片描述

   <script>
        var swiper = new Swiper('.swiper-container', {
            nextButton: '.swiper-button-next',
            prevButton: '.swiper-button-prev',
            pagination: '.swiper-pagination',
            paginationType: 'fraction'
        });
    </script>

注释：这段css的代码就是控制它变成使1/3变成胶囊的样式

 	      .swiper-pagination {
            left: auto;
            right: 7px;
            bottom: 7px;
            width: auto;
            padding: 2px 7px;
            border-radius: 10px;
            color: #fff;
            background: rgba(0, 0, 0, .3);
        }