首先使用npm将Swiper进行加载,引入时需要用到swiper-bundle.min.js和swiper-bundle.min.css文件
<link rel="stylesheet" href="/bbb/swiper/dist/css/swiper.css"> //bbb是根目录和后端进行交互所进行更改的原文件夹为node_modules
HTML 代码如下:
<div class="swiper-container" style="width: 100%;height: 400px ;position: absolute"> <div class="swiper-wrapper" style="width: 100%;height: 400px "> <div class="swiper-slide" id="swiper1" style="width: 1900px;height: 400px"><img src="/aaa/img/4.jpg" alt="style="position: center;width: 100%;height: 400px"></div> <div class="swiper-slide" id="swiper2" style="width: 1900px;height: 400px"><img src="/aaa/img/1.jpg" alt=""style="position: center;width: 100%;height: 400px"></div> <div class="swiper-slide" id="swiper3" style="width: 1900px;height: 400px"><img src="/aaa/img/3.jpg" alt="" style="position: center;width: 100%;height: 400px"></div> <div class="swiper-slide" id="swiper4" style="width: 1900px;height: 400px"><img src="/aaa/img/2.jpg" alt=""style="position: center;width: 100%;height: 400px"></div> </div> <div class="swiper-pagination"> </div> </div>
本次制作的轮播图样式为下方可点击选择的图片,且可以用鼠标拖拽图片进行切换图片(图片下方的蓝色圆点)
js代码如下:
var mySwiper = new Swiper('.swiper-container', { autoplay: { delay: 5000, disableOnInteraction: false, },
//自动播放图片 pagination: { el: '.swiper-pagination', clickable: true, }, }) //鼠标滑过pagination控制swiper切换 for (i = 0; i < mySwiper.pagination.bullets.length; i++) { mySwiper.pagination.bullets[i].onclick = function () { this.click(); }; }