在一些前端項(xiàng)目中需要做滑動(dòng)按鈕，比如滑動(dòng)切換模式之類(lèi)的，如圖：

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

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

如圖所示，“slidesPerView: 3,”:設(shè)置slider容器能夠同時(shí)顯示的slides數(shù)量，在這里設(shè)置為3，”initialSlide: 2,”:設(shè)置為2后，Swiper初始化時(shí)activeSlide成了第三個(gè)。因?yàn)橐瑒?dòng)后對(duì)應(yīng)上的不同模式，就需要用到swiper的回調(diào)函數(shù)”onSlideChangeEnd”,這時(shí)就要用到標(biāo)簽屬性值了（data-index），滑塊成功滑動(dòng)一次”swiper-slide-active”的位置會(huì)發(fā)生改變，獲取的標(biāo)簽屬性值也會(huì)不同。根據(jù)獲取的值的不同分別添加和刪除選中狀態(tài)的類(lèi)名（“on”）,這樣一個(gè)滑動(dòng)按鈕初步就成了。但在實(shí)際測(cè)試過(guò)程中，會(huì)出現(xiàn)回調(diào)函數(shù)不成功的情況，經(jīng)過(guò)多次測(cè)試和研究需要用到” crossFade: true（過(guò)度效果結(jié)束觸發(fā)）”,這樣滑動(dòng)按鈕就完成了。
創(chuàng)新互聯(lián)專注于高端網(wǎng)站建設(shè)，為上市公司、中大型企業(yè)集團(tuán)提供網(wǎng)站定制、小程序定制服務(wù)，歡迎客戶咨詢我們的建站熱線400-800-9385

以上就是關(guān)于網(wǎng)站前端制作之swiper拖拽左右滑動(dòng)按鈕(前端制作個(gè)人網(wǎng)站)，希望對(duì)你有幫助，更多內(nèi)容關(guān)注創(chuàng)新互聯(lián)。

網(wǎng)站標(biāo)題：網(wǎng)站前端制作之swiper拖拽左右滑動(dòng)按鈕(前端制作個(gè)人網(wǎng)站)
當(dāng)前網(wǎng)址：http://chinadenli.net/news3/312553.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站維護(hù)、外貿(mào)建站、品牌網(wǎng)站建設(shè)、做網(wǎng)站、靜態(tài)網(wǎng)站、手機(jī)網(wǎng)站建設(shè)

廣告

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