iT邦幫忙

0

點擊圖片切換圖片及內容

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

程式碼如下
https://codepen.io/qglevknu-the-bold/pen/XWRyZRJ?editors=1011
目前圖片切換功能是完成了

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

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

kekeke iT邦新手 4 級 ‧ 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 檢舉
好的我想一下怎麼做
一組區分成四部分
大圖、縮圖、標題、內容
操作流程都出來了
簡單一點就依據流程把握好元素hide、show時機
要不就跟替換圖片一樣
看起來你是把小圖的src替換大圖的
那就小圖上再綁alt、title等等,點擊後獲取自身的東西替換標題 及 內容呀

1 個回答

0
迷路
iT邦新手 5 級 ‧ 2021-08-10 08:28:57

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

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

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

我要發表回答

立即登入回答