swiper動(dòng)態(tài)改變滑動(dòng)內(nèi)容的實(shí)現(xiàn)方法
假設(shè)當(dāng)前顯示的是1,往左滑動(dòng)一個(gè)遞減1,往右滑動(dòng)一個(gè)遞增1
body下面添加如下代碼
<div class="swiper-container temp"> <div class="swiper-wrapper"> <div class="swiper-slide"> 1 </div> <div class="swiper-slide"> 2 </div> <div class="swiper-slide"> 3 </div> </div> </div>
引用swiper的css和js腳本(當(dāng)前使用的是4.x以上版本)
添加js腳本
var now_ActiveIndex=2;//,//當(dāng)前所在下標(biāo) var tempSwiper = new Swiper('.swiper-container.temp', { initialSlide: 1, loop:true, speed:400, on: { slideChange: function(swiper){//當(dāng)當(dāng)前Slide切換時(shí)執(zhí)行(activeIndex發(fā)生改變) var pre_number=Number($(this.slides[now_ActiveIndex]).text()); if(now_ActiveIndex>this.activeIndex){ if(now_ActiveIndex==4&&this.activeIndex==1){ $(this.slides[this.activeIndex]).text(pre_number); }else{//上一個(gè) var act_number=pre_number-1; $(this.slides[this.activeIndex]).text(act_number); } }else if(now_ActiveIndex<this.activeIndex){ if(now_ActiveIndex==0&&this.activeIndex==3){ $(this.slides[this.activeIndex]).text(pre_number); }else{//下一個(gè) var act_number=pre_number+1; $(this.slides[this.activeIndex]).text(act_number); } } now_ActiveIndex=this.activeIndex; }, }, })
初始值:
往左滑動(dòng)三次:
往右滑動(dòng)一次
做這個(gè)測(cè)試主要為了后面日歷的左右滑動(dòng)改變上一月下一月
總結(jié)
以上所述是小編給大家介紹的swiper動(dòng)態(tài)改變滑動(dòng)內(nèi)容的實(shí)現(xiàn)方法,希望對(duì)大家有所幫助,如果大家有任何疑問(wèn)請(qǐng)給我留言,小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持!
相關(guān)文章
BootStrap點(diǎn)擊保存后實(shí)現(xiàn)模態(tài)框自動(dòng)關(guān)閉的思路(模態(tài)框)
這篇文章主要介紹了BootStrap點(diǎn)擊保存后實(shí)現(xiàn)模態(tài)框自動(dòng)關(guān)閉的思路(模態(tài)框),需要的朋友可以參考下2017-09-09利用canvas判斷點(diǎn)與封閉圖形的包含關(guān)系
今天在寫(xiě)代碼的時(shí)候遇到一個(gè)場(chǎng)景,在一個(gè)封閉圖形頂點(diǎn)已知的情況下判斷點(diǎn)擊時(shí)是否點(diǎn)擊在圖形內(nèi)部,本文給大家介紹了如何利用canvas判斷點(diǎn)與封閉圖形的包含關(guān)系,文中有詳細(xì)的代碼示例供大家參考,需要的朋友可以參考下2024-04-04javascript中將Object轉(zhuǎn)換為String函數(shù)代碼 (json str)
下面的代碼就是想將Object轉(zhuǎn)換為String函數(shù),需要的朋友可以參考下2012-04-04微信小程序頁(yè)面跳轉(zhuǎn)功能之從列表的item項(xiàng)跳轉(zhuǎn)到下一個(gè)頁(yè)面的方法
這篇文章主要介紹了微信小程序頁(yè)面跳轉(zhuǎn)功能之從列表的item項(xiàng)跳轉(zhuǎn)到下一個(gè)頁(yè)面的方法,結(jié)合具體實(shí)例形式總結(jié)分析了微信小程序頁(yè)面跳轉(zhuǎn)及列表item項(xiàng)跳轉(zhuǎn)頁(yè)面的相關(guān)操作技巧,需要的朋友可以參考下2017-11-11JavaScript 閉包機(jī)制詳解及實(shí)例代碼
這篇文章主要介紹了JavaScript 閉包機(jī)制詳解及實(shí)例代碼的相關(guān)資料,需要的朋友可以參考下2016-10-10