網站制作之在swiper的輪播基礎上加頁碼切換效果(南京網站制作)

2024-03-27 分類：網站建設

Swiper(Swiper master)是目前應用較廣泛的移動端網頁觸摸內容滑動js插件。一些輪播圖切換功能同時也適用于PC端。

近期手上一個項目網站的首頁輪播圖模塊就運用到了swiper插件。效果圖如下：

左側下方是新聞切換，右側下方是輪播左右切換箭頭、分式導航和當前輪播圖的選中狀態橫線。

在swiper的基礎案例中有很多類似的切換demo，有基礎輪播：

也有分式導航輪播：

但是我這里要做的包含了基礎輪播的頁碼和分式輪播的頁碼，而在swiper中，這些都是基于div：swiper-pagination實現的，而一個輪播模塊中swiper-pagination只出現一次。因此我就想在swiper基礎的輪播功能上加上分式，來實現手上項目的輪播模塊功能。

至于左右箭頭和選中狀態的橫線這些在原有基礎上修改一下CSS就實現了，在這基礎上增加分式也不難，先上結構：

紅框中的是輪播主體結構；綠框是常規分頁器，這里修改CSS就能實現圖中白色橫線以及當前輪播對應選中狀態；籃框是分式頁碼模塊，n1 是當前頁碼，n2是輪播總頁碼；灰色框是左右切換箭頭，修改CSS就能實現圖中效果。

下面是該輪播模塊調用的js代碼：

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

然后將該方法 num(); 放入到swiper的回調函數 onSlideChangeEnd:function(swiper){}中，這樣就實現了在圖片一次輪播結束時，n1顯示的數字隨之改變的功能。

有點局限的是，這里不支持循環輪播，如果設置loop:ture 那么n2獲取到的數字就不準確，從而造成功能異常，所以這里沒有開啟循環輪播。

相信其他輪播插件也能實現這些功能，當然，也可以自己手寫這樣的輪播功能，具體怎么做就看各人喜好了。

以上就是關于網站制作之在swiper的輪播基礎上加頁碼切換效果(南京網站制作)，希望對你有幫助，更多內容關注創新互聯。

當前名稱：網站制作之在swiper的輪播基礎上加頁碼切換效果(南京網站制作)
URL分享：http://m.kartarina.com/news11/322111.html

成都網站建設公司_創新互聯，為您提供網頁設計公司、標簽優化、關鍵詞優化、網站改版、網站設計、建站公司

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

猜你還喜歡下面的內容