成人午夜视频全免费观看高清-秋霞福利视频一区二区三区-国产精品久久久久电影小说-亚洲不卡区三一区三区一区

網(wǎng)站前端制作之swiper拖拽左右滑動(dòng)按鈕(前端制作個(gè)人網(wǎng)站)

2024-01-08    分類: 網(wǎng)站建設(shè)

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

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

如圖所示,“slidesPerView: 3,”:設(shè)置slider容器能夠同時(shí)顯示的slides數(shù)量,在這里設(shè)置為3,”initialSlide: 2,”:設(shè)置為2后,Swiper初始化時(shí)activeSlide成了第三個(gè)。因?yàn)橐瑒?dòng)后對應(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)的類名(“on”),這樣一個(gè)滑動(dòng)按鈕初步就成了。但在實(shí)際測試過程中,會(huì)出現(xiàn)回調(diào)函數(shù)不成功的情況,經(jīng)過多次測試和研究需要用到” crossFade: true(過度效果結(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)站),希望對你有幫助,更多內(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://jinyejixie.com/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)請盡快告知,我們將會(huì)在第一時(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è)
扎兰屯市| 巴彦淖尔市| 新安县| 封开县| 西贡区| 仙桃市| 原平市| 临高县| 准格尔旗| 乌鲁木齐县| 重庆市| 米泉市| 新闻| 朔州市| 甘孜| 定州市| 肥乡县| 浑源县| 密云县| 嘉荫县| 滨海县| 维西| 陆良县| 天等县| 余干县| 盘山县| 西充县| 大宁县| 札达县| 南雄市| 时尚| 南康市| 松潘县| 寿阳县| 武城县| 潞西市| 徐水县| 龙井市| 思茅市| 吴堡县| 邯郸县|