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

網(wǎng)站制作之在swiper的輪播基礎(chǔ)上加頁碼切換效果

2023-02-28    分類: 網(wǎng)站建設(shè)

Swiper(Swipermaster)是目前應(yīng)用較廣泛的移動(dòng)端網(wǎng)頁觸摸內(nèi)容滑動(dòng)js插件。一些輪播圖切換功能同時(shí)也適用于PC端。
近期手上一個(gè)項(xiàng)目網(wǎng)站的首頁輪播圖模塊就運(yùn)用到了swiper插件。效果圖如下:

左側(cè)下方是新聞切換,右側(cè)下方是輪播左右切換箭頭、分式導(dǎo)航和當(dāng)前輪播圖的選中狀態(tài)橫線。
在swiper的基礎(chǔ)案例中有很多類似的切換demo,有基礎(chǔ)輪播:

也有分式導(dǎo)航輪播:

但是我這里要做的包含了基礎(chǔ)輪播的頁碼和分式輪播的頁碼,而在swiper中,這些都是基于div:swiper-pagination實(shí)現(xiàn)的,而一個(gè)輪播模塊中swiper-pagination只出現(xiàn)一次。因此我就想在swiper基礎(chǔ)的輪播功能上加上分式,來實(shí)現(xiàn)手上項(xiàng)目的輪播模塊功能。
至于左右箭頭和選中狀態(tài)的橫線這些在原有基礎(chǔ)上修改一下CSS就實(shí)現(xiàn)了,在這基礎(chǔ)上增加分式也不難,先上結(jié)構(gòu):

紅框中的是輪播主體結(jié)構(gòu);綠框是常規(guī)分頁器,這里修改CSS就能實(shí)現(xiàn)圖中白色橫線以及當(dāng)前輪播對應(yīng)選中狀態(tài);籃框是分式頁碼模塊,n1 是當(dāng)前頁碼,n2是輪播總頁碼;灰色框是左右切換箭頭,修改CSS就能實(shí)現(xiàn)圖中效果。
下面是該輪播模塊調(diào)用的js代碼:

該代碼只能保證輪播圖正常輪播,分式分頁功能是由下面js代碼控制的:

然后將該方法 num(); 放入到swiper的回調(diào)函數(shù) onSlideChangeEnd:function(swiper){}中,這樣就實(shí)現(xiàn)了在圖片一次輪播結(jié)束時(shí),n1顯示的數(shù)字隨之改變的功能。
有點(diǎn)局限的是,這里不支持循環(huán)輪播,如果設(shè)置loop:ture 那么n2獲取到的數(shù)字就不準(zhǔn)確,從而造成功能異常,所以這里沒有開啟循環(huán)輪播。

新聞標(biāo)題:網(wǎng)站制作之在swiper的輪播基礎(chǔ)上加頁碼切換效果
網(wǎng)站網(wǎng)址:http://m.rwnh.cn/news32/240332.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供網(wǎng)站策劃、關(guān)鍵詞優(yōu)化服務(wù)器托管、網(wǎng)站內(nèi)鏈、面包屑導(dǎo)航、網(wǎng)站導(dǎo)航

廣告

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

成都網(wǎng)站建設(shè)
三明市| 津市市| 荆州市| 许昌市| 项城市| 北票市| 怀宁县| 修文县| 浦城县| 元阳县| 榆树市| 怀远县| 龙山县| 乐业县| 资溪县| 辽宁省| 根河市| 阳山县| 铜梁县| 贵定县| 邢台县| 石门县| 托克托县| 拜城县| 旬阳县| 丘北县| 黎城县| 九龙县| 临沧市| 玉田县| 鄂伦春自治旗| 出国| 龙门县| 徐州市| 宝坻区| 太仓市| 鹰潭市| 崇州市| 永昌县| 韩城市| 平顶山市|