目錄
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() {//定義圖片idconst 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>
![[250516] OpenAI 升級 ChatGPT：GPT-4.1 及 Mini 版上線！](http://pic.xiahunao.cn/[250516] OpenAI 升級 ChatGPT：GPT-4.1 及 Mini 版上線！)
：Spring(2))
 mod C)
