2024-01-21 分類: 網站建設
效果圖我做的一般般,需要美化的可以自行添加效果,在這里我就不演示了。
代碼分為三個部分如圖:
1、html:
用一個div容器carousel包裹整個輪播圖,放置圖片或其他內容的用carousel-wrap容器包裹,指示器用indicator容器,左右箭頭用arrow-wrap容器。
2、css:
包裹整個輪播圖的div容器carousel寬度可以自行設置,這里設置的是500px,高度300px,溢出隱藏(overflow: hidden),這里注意carousel要絕對定位,輪播圖的指示器indicator要相對定位,以便于懸浮在輪播圖上面以及可以點擊到指示器;左右箭頭同指示器同理。
3、js:
首先如上圖指示器部分的JS,結合html的元素slide(存放圖片或其他)第一個默認有個類名on,當點擊指示器任意一個時js獲取點擊當前指示器的下標,同時賦予相對應元素slide類名on,結合css有on類名的顯示,沒有on類名隱藏,從而指示器控制了圖片的隱藏顯示;左右箭頭控制圖片的上一張或下一張顯示隱藏,以左箭頭為例,同理指示器點擊時添加刪除類名on,不過多了一步下標的加減還有判斷,有不懂的可以看看上圖。
這樣一個簡單的PC端輪播圖就出來了。
以上就是關于如何實現PC端網站的輪播圖制作(pc端如何上外網),希望對你有幫助,更多內容關注創新互聯。
當前名稱:如何實現PC端網站的輪播圖制作(pc端如何上外網)
本文網址:http://m.newbst.com/news30/314730.html
成都網站建設公司_創新互聯,為您提供手機網站建設、網站維護、網站制作、搜索引擎優化、品牌網站設計、網站建設
聲明:本網站發布的內容(圖片、視頻和文字)以用戶投稿、用戶轉載內容為主,如果涉及侵權請盡快告知,我們將會在第一時間刪除。文章觀點不代表本網站立場,如需處理請聯系客服。電話:028-86922220;郵箱:631063699@qq.com。內容未經允許不得轉載,或轉載時需注明來源: 創新互聯
猜你還喜歡下面的內容