中文字幕日韩精品一区二区免费_精品一区二区三区国产精品无卡在_国精品无码专区一区二区三区_国产αv三级中文在线

如何實現(xiàn)PC端網站的輪播圖制作

2023-03-28    分類: 網站建設

在PC網頁上我們隨處可以看到很多形形色色的輪播圖,今天我們來做個PC端簡單的輪播圖,不需要都多么高深的技術,只要會簡單的html、css、js就行了;需要引入jq庫,這里我是1.11版本,我們先來看看效果圖,如圖:

輪播圖制作效果1

輪播圖制作效果2
效果圖我做的一般般,需要美化的可以自行添加效果,在這里我就不演示了。
代碼分為三個部分如圖:


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端輪播圖就出來了。

網站題目:如何實現(xiàn)PC端網站的輪播圖制作
本文鏈接:http://m.rwnh.cn/news6/248306.html

成都網站建設公司_創(chuàng)新互聯(lián),為您提供網站建設、App開發(fā)品牌網站建設、電子商務企業(yè)建站、域名注冊

廣告

聲明:本網站發(fā)布的內容(圖片、視頻和文字)以用戶投稿、用戶轉載內容為主,如果涉及侵權請盡快告知,我們將會在第一時間刪除。文章觀點不代表本網站立場,如需處理請聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內容未經允許不得轉載,或轉載時需注明來源: 創(chuàng)新互聯(lián)

成都網站建設
嘉禾县| 通州市| 吉首市| 石台县| 板桥市| 苍南县| 东丽区| 孟连| 吉水县| 基隆市| 鄂温| 义马市| 新营市| 申扎县| 承德市| 鱼台县| 固安县| 杭锦旗| 得荣县| 嵩明县| 兴城市| 措勤县| 旌德县| 恩施市| 迁西县| 信丰县| 徐汇区| 定兴县| 沙坪坝区| 阳城县| 紫金县| 句容市| 祁连县| 蛟河市| 武邑县| 金阳县| 五原县| 华坪县| 达孜县| 德兴市| 萍乡市|