Swiper实现轮播效果

swiper官网：https://3.swiper.com.cn/

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Document</title><linkrel="stylesheet"href="https://unpkg.com/swiper@8/swiper-bundle.min.css"/><script src="https://unpkg.com/swiper@8/swiper-bundle.min.js"></script></head><style>.swiper {width: 620px;height: 720px;}/* 左右箭头 */.swiper-button-prev:after {display: none;}.swiper-button-prev {background: url("./image/left-1.png");background-size: contain;background-repeat: no-repeat;width: 110px;height: 120px;left: 5px;}.swiper-button-next:after {display: none;}.swiper-button-next {background: url("./image/right-1.png");background-size: contain;background-repeat: no-repeat;width: 110px;height: 120px;right: 0px;z-index: 999;position: absolute;}/* 图片显示 */.swiper-slide {display: flex;justify-content: center;align-items: center;}.swiper-slide img {width: 300px;}.swiper-slide-active img {position: absolute;width: 395px;transition: width 0.5s;}.swiper-slide-next img {position: absolute;left: -230px;}.swiper-slide-prev img {position: absolute;right: -230px;}.swiper-slide-active {z-index: 999;}.swiper-slide-next {z-index: 888;}.swiper-slide-prev {z-index: 888;}.bullet-style {width: 0px;height: 0px;border: 6px solid black;background-color: black;background-clip: padding-box;transform: rotateZ(45deg);display: inline-block;margin: 0 8px;cursor: pointer;}.bullet-style:hover {border-color: gray;background-color: gray;}.bullet-style-active {border-style: double;border-width: 8px;}</style><body><div class="swiper"><div class="swiper-wrapper"><div class="swiper-slide"><img src="./image/world-3-3-1.png" /></div><div class="swiper-slide"><img src="./image/world-4-4-1.png" /></div><div class="swiper-slide"><img src="./image/world-2-2-1.png" /></div></div><!-- 分页器 --><div class="swiper-pagination"></div><!--前进后退按钮 --><div class="swiper-button-prev"></div><div class="swiper-button-next"></div></div><!-- <div class="swiper-button-next swiper-button-black"></div> --><script type="module">import Swiper from "https://unpkg.com/swiper@8/swiper-bundle.esm.browser.min.js";let addBullentsEvent = () => {};const mySwiper = new Swiper(".swiper", {loop: true, // 循环模式选项// 分页器pagination: {el: ".swiper-pagination",clickable: true,// 自定义分页其样式type: "custom",renderCustom: function (swiper, current, total) {let renderHTML = "";for (let i = 0; i < total; i++) {if (i + 1 == current) {renderHTML += `<div class="bullet-style bullet-style-active"></div>`;} else {renderHTML += `<div class="bullet-style"></div>`;}}return renderHTML;},},// 前进后退按钮navigation: {nextEl: ".swiper-button-next",prevEl: ".swiper-button-prev",},slidesPerView: 2, //设置slider容器能够同时显示的slides数量spaceBetween: 80, //slide之间的距离（单位px）centeredSlides: true, //设定为true时，active slide会居中，而不是默认状态下的居左。observer: true, //修改swiper自己或子元素时，重新加载observeParents: true, //修改swiper的父元素时，重新加载centerInsufficientSlides: true, //当slides 的总数小于 slidesPerView 时，slides居中。autoplay: {delay: 3000, //3秒切换一次},// 事件on: {paginationRender: function () {console.log("分页器渲染了");// 重新添加事件addBullentsEvent();},autoplayStart: function () {console.log("开始自定切换");},autoplayStop: function () {console.log("关闭自动切换");},},});addBullentsEvent = () => {const bullents = document.getElementsByClassName("bullet-style");for (let i = 0; i < bullents.length; i++) {console.log("obj.onclick", bullents[i].onclick);bullents[i].removeEventListener("click", () => {});bullents[i].addEventListener("click", function () {mySwiper.slideTo(i + 2); //切换到对应的slide，速度为1秒mySwiper.autoplay.start();});}};window.addEventListener("load", () => {addBullentsEvent();document.getElementsByClassName("swiper-button-next")[0].addEventListener("click", () => {mySwiper.autoplay.start();});document.getElementsByClassName("swiper-button-prev")[0].addEventListener("click", () => {mySwiper.autoplay.start();});});</script></body>
</html>