目录
1. 轮播图介绍
2. 实现轮播图
2.1 准备工作
1、准备至少三张图片，并将图片文件名改为数字123
2、搭好HTML的标签
3、写好按钮和图片标签
编辑
2.2 单向绑定图片
2.3 在按钮里使用方法
2.4 运行代码
3. 完整代码
1. 轮播图介绍
首先，什么是轮播图？ 轮播图是指提供【上一页】【下一页】进而能切换图片 , 这在前端页面中是十分常见的一个页面显示
那么好 , 接下来我们看看具体的效果图，这是刚运行的效果：
当我们点击下一页时，图片切换到下一张，并且点击上一页时，必须是之前的上一页
2. 实现轮播图
2.1 准备工作
因为图片的切换是由按钮控制的，所以<img src=等于后面的值一定是个变量，这样才能由按钮中的方法控制，所以我们应该把图片名称设置简单而又容易控制的
1、准备至少三张图片，并将图片文件名改为数字123
这些图片尽量与HTML文件放在同一个目录下
2、搭好HTML的标签
3、写好按钮和图片标签
这个时候，其实已经有模有样的了，我们运行一下代码：
2.2 单向绑定图片
我们要把之前的src地址改成
<img src=`${参数名}.图片的格式`
同时:v-bind能绑定src 使得图片能显示到页面 , 即使id发生变化 , 也不会影响图片显示
接着在script标签中定义一个id
2.3 在按钮里使用方法
在button按钮里 , 通过@click="方法名" 来进行事件控制图片切换
在script标签中定义方法的同时 , 对id的加减进行一个if语句判断:
2.4 运行代码
当我们在第一页时 依然点击上一页按钮, 页面就会弹窗提示
当这是最后一页的时候 , 继续下一页也会弹窗提示
3. 完整代码
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<title>轮播图</title>
</head>
<div id="app">
<img :src=`${id}.png` style="width: 700px;height: 400px;">
<br>
<!-- 在button标签中添加按钮 -->
<button @click="prevPage">上一页</button>
<button @click="nextPage">下一页</button>
</div>
<body>
<script type="module">
import { createApp, ref } from "./vue.esm-browser.js"
createApp({
setup() {
//定义图片id
const id = ref(1);
//定义方法
//上一页
const prevPage = () => {
if (id.value <= 1) {
alert("已经是第一张了");
} else {
id.value--;
}
}
//下一页
const nextPage = () => {
if (id.value >= 3) {
alert("已经是最后一张了");
} else {
id.value++;
}
}
return {
id,
prevPage,
nextPage
}
}
}).mount("#app")
</script>
</body>
</html>
