初入js中有一个必会做的效果,那就是轮播图。轮播图在各网页上也很常见。
轮播图
但是会发现,用原生js写轮播图,代码十分冗长,有时候出现小问题也不知道在哪里。
不过有个swiper插件可以直接实现轮播图效果。
swiper网页:Swiper中文网-轮播图幻灯片js插件,H5页面前端开发
具体使用也很简单,可以看swiper中文教程。
以下是方法。
1.官网上获取swiper,下载一个swiper版本。
2.下载完成后解压后获得的一个文件夹,将文件夹里名为swiper-bundle.min.css和swiper-bundle.min.js放在所写网页的根目录下,也可以新建一个文件夹,将两个文件放在文件夹里,也可将下载好后的文件夹直接放在所写网页的根目录。
3.依据所放的位置,在head处进行链接link(此处放在swiper文件夹)
<link rel="stylesheet" href="swiper/swiper-bundle.min.css">
以及.js文件的链接
<script src="swiper/swiper-bundle.min.js"></script>
4.主题代码可以直接在网页上复制(位置在中文教程-swiper使用方法)
<div class="swiper">
<div class="swiper-wrapper">
<div class="swiper-slide"><img src="photos/4.0图.jpg"></div>
<div class="swiper-slide"><img src="photos/琳妮特.jpg"></div>
<div class="swiper-slide"><img src="photos/林尼.jpg"></div>
<div class="swiper-slide"><img src="photos/林尼2.jpg"></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>
可以看备注来看自己需要那些。
5.依据自己的习惯进行页面的调整。
6.书写js部分
var mySwiper = new Swiper ('.swiper', {
// direction: 'vertical', // 垂直切换选项
loop: true, // 循环模式选项
// 如果需要分页器
pagination: {
el: '.swiper-pagination',
},
// 如果需要前进后退按钮
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
// 如果需要滚动条
// scrollbar: {
// el: '.swiper-scrollbar',
// },
autoplay:true,//等同于以下设置
/*autoplay: {
delay: 3000,
stopOnLastSlide: false,
disableOnInteraction: true,
},*/
})
垂直切换选项,是轮播图圆点的位置是否水平或者垂直。循环模式判断为是否自动循环轮播。其余可以看备注。
写到这里,轮播图就可以自动轮播了。
7.如果想要轮播效果进行改变,例如翻转,可以在js部分中加入
effect: 'flip',
即可将轮播效果变成翻转,如果想要更多效果,可以在swiper官网上查询api文档,里面可能会有你意向不到的收获。
ps:可以在自己完成有轮播图效果页面时使用,平时学校检测啥的可能是断网检测,所以只能使用原生js进行实现。不过使用swiper确实会方便很多,直接ctrl+c和ctrl+v就可以了。只要能读懂api文档,实现属于自己的轮播图,不成问题。