轮播图1/3样式轮播图，模仿淘宝详情页图片胶囊式轮播
首先我们先来看一下完成后的样式
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);
}