swiper動(dòng)態(tài)改變滑動(dòng)內(nèi)容的實(shí)現(xiàn)方法
更新時(shí)間：2018年01月17日 11:39:39 作者：zhyue93
假設(shè)當(dāng)前顯示的是1，往左滑動(dòng)一個(gè)遞減1，往右滑動(dòng)一個(gè)遞增1。下面通過(guò)實(shí)例代碼給大家講解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)文章
推薦一個(gè)封裝好的getElementsByClassName方法
這篇文章主要推薦一個(gè)封裝好的getElementsByClassName方法,需要的朋友可以參考下2014-12-12
在JavaScript中，和JAVA類似，也提供了對(duì)于基本數(shù)據(jù)類型的包裝類型。例如Number、Boolean、String類型。下面我們就來(lái)詳細(xì)探討下吧。2015-06-06
javascript實(shí)現(xiàn)輸入框內(nèi)容提示及隱藏功能
這篇文章主要介紹了javascript實(shí)現(xiàn)輸入框內(nèi)容提示及隱藏功能,實(shí)現(xiàn)方法真的超簡(jiǎn)單，本文通過(guò)示例代碼給大家介紹的非常詳細(xì)，需要的朋友可以參考下2021-09-09
Javascript實(shí)現(xiàn)倒計(jì)時(shí)時(shí)差效果
這篇文章主要為大家詳細(xì)介紹了Javascript實(shí)現(xiàn)倒計(jì)時(shí)時(shí)差效果，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-05-05
js 利用image對(duì)象實(shí)現(xiàn)圖片的預(yù)加載提高訪問(wèn)速度
我們來(lái)學(xué)習(xí)一種名為圖像預(yù)裝載（image preloading）的小技巧來(lái)提高圖像訪問(wèn)速度，一些瀏覽器試圖通過(guò)在本地緩存中保存這些圖片來(lái)解決此問(wèn)題，感興趣的朋友可以了解下2013-03-03
JavaScript跨域調(diào)用基于JSON的RESTful API
這篇文章主要介紹了JavaScript跨域調(diào)用基于JSON的RESTful API的相關(guān)資料,非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友可以參考下2016-07-07
js如何判斷用戶是在PC端和還是移動(dòng)端訪問(wèn)
這篇文章主要介紹了js如何判斷用戶是在PC端和還是移動(dòng)端訪問(wèn),需要的朋友可以參考下2014-04-04
兼容最新firefox、chrome和IE的javascript圖片預(yù)覽實(shí)現(xiàn)代碼
這篇文章主要介紹了兼容最新firefox、chrome和IE的javascript圖片預(yù)覽實(shí)現(xiàn)代碼,測(cè)試了瀏覽器firefox6、firefox12、chrome 25.0.1364.172 m、IE6-IE10 都兼容,需要的朋友可以參考下2014-08-08
這篇文章主要給大家介紹了關(guān)于js數(shù)組的基本使用，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2021-01-01
layui上傳圖片到服務(wù)器的非項(xiàng)目目錄下的方法
今天小編就為大家分享一篇layui上傳圖片到服務(wù)器的非項(xiàng)目目錄下的方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2019-09-09