再写轮播图——两张图切换，一张充当背景并且模糊，一张做展示图
第一步：搭结构
其实结构很简单，因为是用swiper插件写的，套搬就行
<div class="swiper"><div class="swiper-wrapper"><div class="swiper-slide">Slide 1</div><div class="swiper-slide">Slide 2</div><div class="swiper-slide">Slide 3</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>
上面这是swiper官网给的结构，然后再给要轮播的区域加一点儿细节
首先要明白，轮播并不是只轮播图，是轮播的“块”，块可以自己进行设计，哪怕是每一块有不同的设计都行
来，端代码
这是每一块区域的结构代码
<div class="swiper-slide"><div class="slide-picture" id="Slide1" style="background: url(./image/蒙德.jpg);"><div class="mohu"></div><div id="img"><img src="./image/蒙德.jpg" alt=""></div></div></div>
OK，以上，结构就算代建完成
当然还没结束，还有关键的一步，光搬了结构代码，设计了结构，还要初始化插件
先建立一个script标签
<script></script>
然后再从swiper网站复制初始化插件的代码
var mySwiper = new Swiper('.swiper', {effect: 'fade',//渐入渐出autoplay: true, // 自动播放autoplay: {delay: 1000 },//每张图片显示的时间loop: true, // 循环模式选项// 如果需要分页器pagination: {el: '.swiper-pagination',clickable: true, //配置点击切换效果},// 如果需要前进后退按钮navigation: {nextEl: '.swiper-button-prev',prevEl: '.swiper-button-next',},// 如果需要滚动条//scrollbar: {// el: '.swiper-scrollbar',//},})
将上面的代码粘贴到建立好的script标签中
然后最关键的一步，引入swiper封装好的js文件和css文件，要注意的是：css文件一定要在你自己写css样式表的上层
像下面这样
好了，接下来，就可自己根据需求对样式进行细化了
css代码：
body {background-color: #eee;}.swiper {width: 100%;margin-top: 200px;position: relative;}div.swiper-wrapper {width: 100%;}/* 如果需要分页器 */.swiper-pagination span{border: 5px solid rgba(66,66,66,.6);background: #eee;height: 10px;width: 10px;}/* 如果需要导航按钮 */.swiper-button-prev,.swiper-button-next{background: rgba(51,51,51,.4);color: #eee;}.swiper-button-next:after, .swiper-button-prev:after{font-size: 16px;}.swiper-button-prev {left: 320px;}.swiper-button-next {right: 320px;}.slide-picture {width: 100%;}.mohu {width: 100%;height: 260px;backdrop-filter: blur(20px);}#img {position: absolute;top: 0;left: 320px;z-index: 9999;width: 1280px;}#img>img {width: 1280px;height: 260px;background: no-repeat;background-size: cover;}
最后算是完工了，轮播图这个东西，一开始我接触的时候，也觉得好难，怎么改样式表都达不到效果，最后还是多写，多问，查api文档才搞定，后来就陆陆续续多写了好多轮播图，写多了自然而然也就熟练了，一些常见问题也有更多的结局思路了，相信你自己，一定能更好的实现你想要功能！
