點擊圖片切換圖片及內容

javascript vue.js

jk9746987 2021-08-09 18:25:29 ‧ 1200 瀏覽

我想要做一個功能類似人物誌的簡介
簡介裡會有一張大圖示及人物誌標題和內容
其餘部份是小圖示
當點擊小圖示時，小圖示與大圖示會做切換
人物誌標題及內容也會跟著切換

但我不曉得要怎麼將小圖示及小圖示的標題和內容綁在一起秀出來..
再麻煩各位大神幫忙看一下

還是說用vue會比較好做這功能呢？

qpalzm iT邦新手 1 級 ‧ 2021-08-10 08:26:11 檢舉

可以試試用物件把一張圖片的資訊包起來例如:
let obj={
ImgUrl:"aaa.png",
txt:"aaa"
},
let url=obj.ImgUrl;
let text=obj.txt;
使用上就能夠選擇要的圖片跟文字做對應的切換,提供參考~~

jk9746987 iT邦新手 5 級 ‧ 2021-08-10 14:15:15 檢舉

好的我想一下怎麼做

archer9080 iT邦研究生 4 級 ‧ 2021-08-10 15:26:00 檢舉

一組區分成四部分
大圖、縮圖、標題、內容
操作流程都出來了
簡單一點就依據流程把握好元素hide、show時機
要不就跟替換圖片一樣
看起來你是把小圖的src替換大圖的
那就小圖上再綁alt、title等等，點擊後獲取自身的東西替換標題及內容呀

直播研討會

{{ item.channelVendor }} {{ item.webinarstarted }} |

直播中

迷路

iT邦新手 2 級 ‧ 2021-08-10 08:28:57

文字也可以像圖片一樣替換內容啊
用innerText可以替換元素內的文字

jk9746987 iT邦新手 5 級 ‧ 2021-08-10 14:14:21 檢舉

我知道呀但我卡的是我不曉得要怎麼讓文字也像圖片一樣跑迴圈
當我點某一個小圖，大圖換成小圖以及使大圖的文字介紹轉為小圖的文字介紹

立即登入回答

參賽組數

1123 組

團體組數

52 組

累計文章數

23096 篇

完賽人數

656 人

IT邦幫忙