首先我们先来看一下完成后的样式
1、用到的插件是swiper插件
swiper官网：/
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="/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);}
