再写轮播图——两张图切换，一张充当背景并且模糊，一张做展示图

第一步：搭结构

其实结构很简单，因为是用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文档才搞定，后来就陆陆续续多写了好多轮播图，写多了自然而然也就熟练了，一些常见问题也有更多的结局思路了，相信你自己，一定能更好的实现你想要功能！

再写轮播图——两张图切换，一张充当背景并且模糊，一张做展示图相关推荐

jquery手写轮播图_15个超强的jQuery/HTML5图片轮播插件
最近我们为大家分享过不少基于jQuery的图片轮播插件,当然也有很多使用了HTML5和CSS3的相关技术,让整个图片播放器显得更加美观,动画效果显得更加炫酷.这次我们特意为大家筛选了一些最新的jQue ...
jquery手写轮播图_用jQuery如何手写一个简单的轮播图？（附代码）
用jQuery如何手写一个简单的轮播图?下面本篇文章通过代码示例来给大家介绍一下.有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助. 用 jQuery 手写轮播图先上个效果截图: 主要 ...
html+轮播图下标跳转代码,最简单的JavaScript图片轮播代码(两种方法)
通过改变每个图片的opacity属性: 素材图片: 代码一: 最简单的轮播广告 body, div, ul, li { margin: ; padding: ; } ul { list-style-t ...
jquery手写轮播图_jquery 实现轮播图详解及实例代码_jquery_脚本之家
轮播图: 接触jquery也有一段时间了,今天刚好利用轮播图来练练手.博文的前面会介绍一个简单用jquery做轮播图的例子,中间会插入一些关于轮播图更多的思考,在后面会用Javascript的方法来写 ...
jquery手写轮播图_jquery 轮播图怎么写
jquery轮播图的实现方法:首先创建一个放置的盒子"p.focus":然后将overflow设置为hidden:接着通过javascript实现点击左右翻页切换图片的功能即可. ...
轮播图高度自适应_干货！弘成教你写轮播图全自动适应封装代码
点击蓝字关注我们在弘成教育任UI讲师,带了几十个班数百个学生了,我发现学生们最头疼的不是网站界面的设计,各种网站的设计,专题页,详情页,店铺装修,他们都能设计得漂漂亮亮.也不是HTML+CSS的静 ...
【JS 纯手写轮播图代码】
轮播图实现首先需要在同级目录下创建img文件夹,用以储存你需要轮播的图片,注意设置好图片的宽度,以免出现空白区域.然后就可以愉快地实现轮播功能啦~ // An highlighted block & ...
js写轮播图（左右箭头）
写个人博客时写到了轮播图先说明未完善的地方:在第一张图片按左键时,不能转到最后一张图片(但最后一张图片按右键时可以转到第一张图片). 不过一般第一张图片也不需要转到最后一张,所以没大问题.(可以试试 ...
写轮播图时，关于offsetX和pageX的选择以及一些坑
一.不要使用offsetX 前几天在公司实习,由于使用了swiper来做c端的滑动效果,在自定义的过程中,出现了一系列的坑,我看了源码,看了文档,也还是没有很好的理解,这个swiper的标准操作流程, ...
jquery手写轮播图_用jquery实现图片轮播怎么写呢求指教
展开全部 *{ margin: 0; padding: 0; } ul{ list-style:none; } .slideShow{ width: 620px; height: 700px; ...

再写轮播图——两张图切换，一张充当背景并且模糊，一张做展示图

再写轮播图——两张图切换，一张充当背景并且模糊，一张做展示图

第一步：搭结构

再写轮播图——两张图切换，一张充当背景并且模糊，一张做展示图相关推荐

最新文章

热门文章