js-轮播图
swiper插件使用
官网：Swiper中文网-轮播图幻灯片js插件,H5页面前端开发
粘贴到目录下
复制结构的代码，不要轻易更换
效果：
例子（该案例进行了略微修改，下面会列出）
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport"content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no"><title>~</title><link rel="shortcut icon" href="https://www.bilibili.com/favicon.ico"><link rel="stylesheet" href="css/index.css"><link rel="stylesheet" href="swiper/css/swiper.min.css"><meta name="keywords" content="..." /><style>/*写代码时始终要考虑权重问题！*/@font-face {font-family: 'icomoon';src: url('fonts/icomoon.eot?au9n7q');src: url('fonts/icomoon.eot?au9n7q#iefix') format('embedded-opentype'),url('fonts/icomoon.ttf?au9n7q') format('truetype'),url('fonts/icomoon.woff?au9n7q') format('woff'),url('fonts/icomoon.svg?au9n7q#icomoon') format('svg');font-weight: normal;font-style: normal;font-display: block;}.box {width: 800px;height: 300px;background-color: #fff;margin: 100px auto;position: relative;}html,body {position: relative;height: 100%;}body {background: #eee;font-family: Helvetica Neue, Helvetica, Arial, sans-serif;font-size: 14px;color: #000;margin: 0;padding: 0;}.swiper {overflow: hidden;width: 100%;height: 100%;}.swiper-slide {text-align: center;font-size: 18px;background: #fff;display: flex;justify-content: center;align-items: center;}.swiper-slide img {display: block;width: 100%;height: 100%;object-fit: cover;}</style>
</head><body><div class="box"><div class="swiper mySwiper"><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 class="swiper-slide">Slide 4</div><div class="swiper-slide">Slide 5</div><div class="swiper-slide">Slide 6</div><div class="swiper-slide">Slide 7</div><div class="swiper-slide">Slide 8</div><div class="swiper-slide">Slide 9</div></div><div class="swiper-button-next"></div><div class="swiper-button-prev"></div><div class="swiper-pagination"></div></div></div><script src="swiper\js\swiper.min.js"></script><script>let swiper = new Swiper(".mySwiper", {pagination: {el: ".swiper-pagination",type: "fraction",},navigation: {nextEl: ".swiper-button-next",prevEl: ".swiper-button-prev",},});</script></body></html>效果：
大部分都是直接复制粘贴：
让该轮播图变小：
用box限制，其中用 position：relative；否则箭头会定位到最大的HTML上，
hidden进行隐藏。
API文档有更多教程：
自动播
触摸后是否继续