網(wǎng)站前端制作之swiper拖拽左右滑動按鈕

2023-02-07 分類：網(wǎng)站建設

在一些前端項目中需要做滑動按鈕，比如滑動切換模式之類的，如圖：

前端制作1

在PC端上，鼠標拖動滑塊一次切換不同的模式，用js自己寫比較麻煩，我想到了一個簡單有效的辦法，用swiper輪播插件來寫簡單快速。Swiper輪播插件是非常強大的，前端工作人員一定不陌生，如果你不了解可以去官網(wǎng)看看API，你會發(fā)現(xiàn)它不僅僅只局限于表面的輪播功能。
首先在頁面引入jquery和swiper插件，然后是編寫html代碼如圖：

前端代碼2

在這里有3種不同的模式要切換，就要用到5個swiper-slide，如圖所示在第1個swiper-lisde中設置標簽屬性data-index="2"，第2個swiper-lisde中設置標簽屬性data-index="1"，第3個swiper-lisde中設置標簽屬性data-index="0"，同時第三個swiper-slide設置滑塊背景圖片，其余的空白。Css在這里就不多說了。
Siwpe輪播插件有自帶的API，如圖：

前端代碼3

如圖所示，“slidesPerView: 3,”:設置slider容器能夠同時顯示的slides數(shù)量，在這里設置為3，”initialSlide: 2,”:設置為2后，Swiper初始化時activeSlide成了第三個。因為要滑動后對應上的不同模式，就需要用到swiper的回調(diào)函數(shù)”onSlideChangeEnd”,這時就要用到標簽屬性值了（data-index），滑塊成功滑動一次”swiper-slide-active”的位置會發(fā)生改變，獲取的標簽屬性值也會不同。根據(jù)獲取的值的不同分別添加和刪除選中狀態(tài)的類名（“on”）,這樣一個滑動按鈕初步就成了。但在實際測試過程中，會出現(xiàn)回調(diào)函數(shù)不成功的情況，經(jīng)過多次測試和研究需要用到” crossFade: true（過度效果結(jié)束觸發(fā)）”,這樣滑動按鈕就完成了。

本文標題：網(wǎng)站前端制作之swiper拖拽左右滑動按鈕
文章起源：http://www.aaarwkj.com/news/235725.html

成都網(wǎng)站建設公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站設計、響應式網(wǎng)站、Google、動態(tài)網(wǎng)站、企業(yè)網(wǎng)站制作、網(wǎng)站導航

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

猜你還喜歡下面的內(nèi)容

網(wǎng)站外包與網(wǎng)站定制之間的矛盾淺析 2023-02-07
成都建網(wǎng)站非速戰(zhàn)速決，時間了解很重要 2023-02-07
APP外包項目開發(fā)內(nèi)容 2023-02-07
互聯(lián)網(wǎng)共享經(jīng)濟淪陷對網(wǎng)站運營有哪些啟迪 2023-02-07
?想要網(wǎng)站制作風格突出有特色這些設計原則要謹記 2023-02-07
成都網(wǎng)站建設公司之信息類門戶網(wǎng)站優(yōu)化有什么訣竅 2023-02-07
網(wǎng)站建設過程中如何避免設計不當？ 2023-02-07
中小企業(yè)網(wǎng)站建設如何應對用戶跳出 2023-02-07

欧美一级特黄大片做受成人-亚洲成人一区二区电影-激情熟女一区二区三区-日韩专区欧美专区国产专区

網(wǎng)站前端制作之swiper拖拽左右滑動按鈕