当前位置：首页 > news >正文

【JavaScript】二十三、M端事件 + 轮播图Swiper插件

news 来源：原创 2025/5/23 7:11:03

文章目录

1、M端事件
2、swiper插件
- 2.1 插件
- 2.2 轮播图插件Swiper的使用
3、案例：学生信息表

1、M端事件

移动端有一个独有的事件：触屏事件 touch(也称触摸事件)，Android 和 IOS 都有，touch 对象代表一个触摸点。触摸点可能是一根手指，也可能是一根触摸笔，触屏事件可响应用户手指(或触控笔 )对屏幕或者触控板操作，相关事件：

在这里插入图片描述

<!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"><title>Document</title><style>div {width: 300px;height: 300px;background-color: pink;}</style>
</head><body><div></div><script>const div = document.querySelector('div')// 1. 触摸div.addEventListener('touchstart', function () {console.log('开始摸我了')})// 2. 离开div.addEventListener('touchend', function () {console.log('离开了')})// 3. 移动div.addEventListener('touchmove', function () {console.log('一直摸，移动')})</script>
</body></html>

F12切换工具栏，用鼠标滑动，体验下触屏：

在这里插入图片描述

2、swiper插件

2.1 插件

对每一个新的插件，了解步骤如下，以swiper为例：

看官网

https://www.swiper.com.cn/

看需要功能的在线演示demo

https://www.swiper.com.cn/demo/index.html

查看基本使用流程

https://www.swiper.com.cn/usage/index.html

查看API文档，配置自己的插件

https://www.swiper.com.cn/api/index.html

2.2 轮播图插件Swiper的使用

根据使用方法，下载对应版本的swiper并解压，复制这个scc和js文件到自己的项目中

在这里插入图片描述

引入这个文件，假设你有一个box样式的div盒子，这里面将来要放轮播图

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><link rel="stylesheet" href="./swiper-bundle.min.css"><style>.box {width: 800px;height: 300px;background-color: greenyellow;}</style>
</head><body><!-- 实际这里将来要放轮播图 --><div class="box"></div><script src="./swiper-bundle.min.js"></script></body></html>

在Demo里找你想要的轮播图效果，点击在新窗口打开

在这里插入图片描述

F12，复制这个Demo的CSS样式、html、以及JS代码到自己的项目中

在这里插入图片描述

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><link rel="stylesheet" href="./swiper-bundle.min.css"><style>.box {width: 800px;height: 300px;background-color: greenyellow;}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;}body {background: #fff;font-family: Helvetica Neue, Helvetica, Arial, sans-serif;font-size: 14px;color: #000;margin: 0;padding: 0;}html,body {position: relative;height: 100%;}body {display: flex;justify-content: center;align-items: center;}.swiper {width: 240px;height: 320px;}.swiper-slide {display: flex;align-items: center;justify-content: center;border-radius: 18px;font-size: 22px;font-weight: bold;color: #fff;}.swiper-slide:nth-child(1n) {background-color: rgb(206, 17, 17);}.swiper-slide:nth-child(2n) {background-color: rgb(0, 140, 255);}.swiper-slide:nth-child(3n) {background-color: rgb(10, 184, 111);}.swiper-slide:nth-child(4n) {background-color: rgb(211, 122, 7);}.swiper-slide:nth-child(5n) {background-color: rgb(118, 163, 12);}.swiper-slide:nth-child(6n) {background-color: rgb(180, 10, 47);}.swiper-slide:nth-child(7n) {background-color: rgb(35, 99, 19);}.swiper-slide:nth-child(8n) {background-color: rgb(0, 68, 255);}.swiper-slide:nth-child(9n) {background-color: rgb(218, 12, 218);}.swiper-slide:nth-child(10n) {background-color: rgb(54, 94, 77);}</style>
</head><body><div class="box"><div class="swiper mySwiper swiper-cards swiper-3d swiper-initialized swiper-horizontal swiper-watch-progress"><div class="swiper-wrapper" id="swiper-wrapper-643108d9a8fd441b5" aria-live="polite" style="cursor: grab;"><div class="swiper-slide swiper-slide-visible swiper-slide-active" role="group" aria-label="1 / 9"style="width: 240px; z-index: 9; transform: translate3d(0px, 0px, 0px) rotateZ(0deg) scale(1);">Slide 1<div class="swiper-slide-shadow swiper-slide-shadow-cards" style="opacity: 0;"></div></div><div class="swiper-slide swiper-slide-next" role="group" aria-label="2 / 9"style="width: 240px; z-index: 8; transform: translate3d(calc(7.25% - 240px), 0px, -100px) rotateZ(2deg) scale(1);">Slide 2<div class="swiper-slide-shadow swiper-slide-shadow-cards" style="opacity: 1;"></div></div><div class="swiper-slide" role="group" aria-label="3 / 9"style="width: 240px; z-index: 7; transform: translate3d(calc(13% - 480px), 0px, -200px) rotateZ(4deg) scale(1);">Slide 3<div class="swiper-slide-shadow swiper-slide-shadow-cards" style="opacity: 1;"></div></div><div class="swiper-slide" role="group" aria-label="4 / 9"style="width: 240px; z-index: 6; transform: translate3d(calc(17.25% - 720px), 0px, -300px) rotateZ(6deg) scale(1);">Slide 4<div class="swiper-slide-shadow swiper-slide-shadow-cards" style="opacity: 1;"></div></div><div class="swiper-slide" role="group" aria-label="5 / 9"style="width: 240px; z-index: 5; transform: translate3d(calc(20% - 960px), 0px, -400px) rotateZ(8deg) scale(1);">Slide 5<div class="swiper-slide-shadow swiper-slide-shadow-cards" style="opacity: 1;"></div></div><div class="swiper-slide" role="group" aria-label="6 / 9"style="width: 240px; z-index: 4; transform: translate3d(calc(20% - 1200px), 0px, -400px) rotateZ(8deg) scale(1);">Slide 6<div class="swiper-slide-shadow swiper-slide-shadow-cards" style="opacity: 1;"></div></div><div class="swiper-slide" role="group" aria-label="7 / 9"style="width: 240px; z-index: 3; transform: translate3d(calc(20% - 1440px), 0px, -400px) rotateZ(8deg) scale(1);">Slide 7<div class="swiper-slide-shadow swiper-slide-shadow-cards" style="opacity: 1;"></div></div><div class="swiper-slide" role="group" aria-label="8 / 9"style="width: 240px; z-index: 2; transform: translate3d(calc(20% - 1680px), 0px, -400px) rotateZ(8deg) scale(1);">Slide 8<div class="swiper-slide-shadow swiper-slide-shadow-cards" style="opacity: 1;"></div></div><div class="swiper-slide" role="group" aria-label="9 / 9"style="width: 240px; z-index: 1; transform: translate3d(calc(20% - 1920px), 0px, -400px) rotateZ(8deg) scale(1);">Slide 9<div class="swiper-slide-shadow swiper-slide-shadow-cards" style="opacity: 1;"></div></div></div><span class="swiper-notification" aria-live="assertive" aria-atomic="true"></span></div></div><script src="./swiper-bundle.min.js"></script><script>var swiper = new Swiper(".mySwiper", {effect: "cards",grabCursor: true,autoplay: {delay: 1000, //1000毫秒切换一次，即一秒切换1次disableOnInteraction: false,    //鼠标拉动后默认停止轮播，这里根据api文档选false，让继续轮播}});</script>
</body></html>

根据API文档的说明，补充或修改做自己定制化的效果，比如每隔一秒就自动播放

在这里插入图片描述

效果：

在这里插入图片描述

3、案例：学生信息表

需求：点击录入，新增一条数据，点击操作，删除对应的数据
在这里插入图片描述
实现思路：

声明一个空数组，用于装录入的数据
点击录入，写到数组里
根据数组渲染就业榜表格
点击删除，删除数组中的数据，并根据数组数据重新渲染表格

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><meta http-equiv="X-UA-Compatible" content="ie=edge" /><title>学生信息管理</title><link rel="stylesheet" href="css/index.css" />
</head><body><h1>新增学员</h1><!-- autocomplete="off"即不显示你之前填过的信息，比如之前录入过张三，下次再录入名字，不给你显示张三让你选 --><form class="info" autocomplete="off">姓名：<input type="text" class="uname" name="uname" />年龄：<input type="text" class="age" name="age" />性别:<select name="gender" class="gender"><option value="男">男</option><option value="女">女</option></select>薪资：<input type="text" class="salary" name="salary" />就业城市：<select name="city" class="city"><option value="北京">北京</option><option value="上海">上海</option><option value="广州">广州</option><option value="深圳">深圳</option><option value="曹县">曹县</option></select><button class="add">录入</button></form><h1>就业榜</h1><table><thead><tr><th>学号</th><th>姓名</th><th>年龄</th><th>性别</th><th>薪资</th><th>就业城市</th><th>操作</th></tr></thead><tbody><!-- <tr><td>1001</td><td>欧阳霸天</td><td>19</td><td>男</td><td>15000</td><td>上海</td><td><a href="javascript:">删除</a></td></tr> --></tbody></table><script>// 增删都是基于这个数组的const arr = []const tbody = document.querySelector('tbody')const uname = document.querySelector('.uname')const age = document.querySelector('.age')const gender = document.querySelector('.gender')const salary = document.querySelector('.salary')const city = document.querySelector('.city')// 是表单的提交事件，不是button按钮的点击事件const form = document.querySelector('.info')// 获取所有带有name属性的元素const items = document.querySelectorAll('[name]')form.addEventListener('submit', function (e) {// 阻止表单元素的默认行为，不让表单跳转e.preventDefault()// 校验数据合法性for (let i = 0; i < items.length; i++) {if (items[i].value === '') {return alert('必填项为空')}}const obj = {// 用数组索引来当作序号stuId: arr.length + 1,uname: uname.value,age: age.value,gender: gender.value,salary: salary.value,city: city.value}//录入的数据放入数组arr.push(obj)// 数据录入后要清空重置表单中刚填的数据this.reset()// 重新渲染render()})// 根据数据渲染页面function render() {// 渲染之前，先清空tbody，不然会重复渲染一遍之前的数据tbody.innerHTML = ''for (let i = 0; i < arr.length; i++) {const tr = document.createElement('tr')// a标签加自定义属性，方便后面删除数据时知道要删哪条tr.innerHTML = `<td>${arr[i].stuId}</td><td>${arr[i].uname}</td><td>${arr[i].age}</td><td>${arr[i].gender}</td><td>${arr[i].salary}</td><td>${arr[i].city}</td><td><a href="javascript:" data-id=${i}>删除</a> </td>`tbody.appendChild(tr)}}// 点击删除数据，表中每一行都有一个删除，那考虑事件委托，给唯一的tbodytbody.addEventListener('click', function (e) {if (e.target.tagName === 'A') {arr.splice(e.target.dataset.id, 1)}// 重新渲染render()})</script></body></html>