swiper實(shí)現(xiàn)導(dǎo)航滾動(dòng)效果
更新時(shí)間：2020年12月13日 14:22:46 作者：mySunshine921
這篇文章主要為大家詳細(xì)介紹了swiper實(shí)現(xiàn)導(dǎo)航滾動(dòng)效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
本文實(shí)例為大家分享了swiper實(shí)現(xiàn)導(dǎo)航滾動(dòng)效果的具體代碼，供大家參考，具體內(nèi)容如下
1.需求：點(diǎn)擊導(dǎo)航科目，選中元素自動(dòng)往前滑動(dòng)處于中間位置，tab切換
<div class="swiper-container city-column-course">
<ul class="swiper-wrapper">
<li class="swiper-slide on">
<h4>推薦</h4>
<p>Recommend</p>
</li>
<li class="swiper-slide">
<h4>英語培訓(xùn) </h4>
<p>English training</p>
</li>
<li class="swiper-slide">
<h4>早教 </h4>
<p>Early education</p>
</li>
<li class="swiper-slide">
<h4>設(shè)計(jì)培訓(xùn) </h4>
<p>Design training</p>
</li>
<li class="swiper-slide">
<h4>舞蹈培訓(xùn) </h4>
<p>Dance training</p>
</li>
<li class="swiper-slide">
<h4>藝考 </h4>
<p>Art Examination</p>
</li>
</ul>
</div>
<div class="swiper-container city-course-list">
<div class="tab-box swiper-wrapper">
<ul class="index-column-course clearfix swiper-slide">
<li>
<a href="#" >
<div class="course-item-logo">
<img src="images/12120_621da.jpg" alt="">
</div>
<p class="course-item-name">高考復(fù)讀培訓(xùn)班</p>
</a>
<a href="#" class="course-item-jg">濟(jì)南大智學(xué)校</a>
</li>
<li>
<a href="#" >
<div class="course-item-logo">
<img src="images/12120_621da.jpg" alt="">
</div>
<p class="course-item-name">高考復(fù)讀培訓(xùn)班</p>
</a>
<a href="#" class="course-item-jg">濟(jì)南大智學(xué)校</a>
</li>
<li>
<a href="#" >
<div class="course-item-logo">
<img src="images/12120_621da.jpg" alt="">
</div>
<p class="course-item-name">高考復(fù)讀培訓(xùn)班</p>
</a>
<a href="#" class="course-item-jg">濟(jì)南大智學(xué)校</a>
</li>
<li>
<a href="#" >
<div class="course-item-logo">
<img src="images/12120_621da.jpg" alt="">
</div>
<p class="course-item-name">高考復(fù)讀培訓(xùn)班</p>
</a>
<a href="#" class="course-item-jg">濟(jì)南大智學(xué)校</a>
</li>
</ul>
<ul class="index-column-course clearfix swiper-slide">
<li>
<a href="#" >
<div class="course-item-logo">
<img src="images/12120_621da.jpg" alt="">
</div>
<p class="course-item-name">高考復(fù)讀培訓(xùn)高考復(fù)讀培訓(xùn)班</p>
</a>
<a href="#" class="course-item-jg">濟(jì)南大智學(xué)校</a>
</li>
<li>
<a href="#" >
<div class="course-item-logo">
<img src="images/12120_621da.jpg" alt="">
</div>
<p class="course-item-name">高考復(fù)讀培訓(xùn)班</p>
</a>
<a href="#" class="course-item-jg">濟(jì)南大智學(xué)校</a>
</li>
<li>
<a href="#" >
<div class="course-item-logo">
<img src="images/12120_621da.jpg" alt="">
</div>
<p class="course-item-name">高考復(fù)讀培訓(xùn)班</p>
</a>
<a href="#" class="course-item-jg">濟(jì)南大智學(xué)校</a>
</li>
<li>
<a href="#" >
<div class="course-item-logo">
<img src="images/12120_621da.jpg" alt="">
</div>
<p class="course-item-name">高考復(fù)讀培訓(xùn)班</p>
</a>
<a href="#" class="course-item-jg">濟(jì)南大智學(xué)校</a>
</li>
</ul>
</div>
</div>
js：
var mySwiper = new Swiper('.city-column-course', {
freeMode: true,
freeModeMomentumRatio: 0.5,
slidesPerView: 'auto',
});
//滑動(dòng)列表，導(dǎo)航滑動(dòng)到相應(yīng)科目并居中顯示
var cityList = new Swiper('.city-course-list',{
slidesPerView : 1,
onSlideChangeEnd: function(swiper){
var num=swiper.activeIndex;
$(".city-column-course").find("li").eq(num).addClass("on").siblings("li").removeClass("on");
slide = mySwiper.slides[num];
slideLeft = slide.offsetLeft;
slideWidth = slide.clientWidth;
slideCenter = slideLeft + slideWidth / 2;
// 被點(diǎn)擊slide的中心點(diǎn)
mySwiper.setWrapperTransition(300);
if (slideCenter < swiperWidth / 2) {
mySwiper.setWrapperTranslate(0);
} else if (slideCenter > maxWidth) {
mySwiper.setWrapperTranslate(maxTranslate);
} else {
nowTlanslate = slideCenter - swiperWidth / 2;
mySwiper.setWrapperTranslate(-nowTlanslate);
}
}
})
swiperWidth = mySwiper.container[0].clientWidth;
maxTranslate = mySwiper.maxTranslate();
maxWidth = -maxTranslate + swiperWidth / 2;
$(".city-column-course").on('touchstart', function (e) {
e.preventDefault();
});
//document.addEventListener('touchmove', function (e) { e.preventDefault(); }, false);
mySwiper.on('tap', function (swiper, e) {
// e.preventDefault()
slide = swiper.slides[swiper.clickedIndex];
slideLeft = slide.offsetLeft;
slideWidth = slide.clientWidth;
slideCenter = slideLeft + slideWidth / 2;
// 被點(diǎn)擊slide的中心點(diǎn)
mySwiper.setWrapperTransition(300);
if (slideCenter < swiperWidth / 2) {
mySwiper.setWrapperTranslate(0);
} else if (slideCenter > maxWidth) {
mySwiper.setWrapperTranslate(maxTranslate);
} else {
nowTlanslate = slideCenter - swiperWidth / 2;
mySwiper.setWrapperTranslate(-nowTlanslate);
}
$(".city-column-course .on").removeClass('on');
$(".city-column-course .swiper-slide").eq(swiper.clickedIndex).addClass('on');
cityList.slideTo(swiper.clickedIndex, 500, false);//切換到第一個(gè)slide
});
2.需求：滑動(dòng)這塊，導(dǎo)航選中的元素隨著變化
<ul class="index-column-edu-nav clearfix">
<li class="on"><a href="javascript:;" >培訓(xùn)匯</a></li>
<li><a href="javascript:;" >最新知識(shí)</a></li>
<li><a href="javascript:;" >品牌專題</a></li>
</ul>
<div class="swiper-container index-edu-swiper">
<div class="tab-box swiper-wrapper">
<dl class="index-column-xun swiper-slide">
<dd class="clearfix">
<div class="index-xun-item-left fl">
<a href="#" class="title">英語口語小技巧分享</a>
<p class="date">2020年09月27日</p>
</div>
<a href="#" class="index-xun-item-right fr">
<img src="images/34340_4a110b.jpg" alt="">
</a>
</dd>
<dd class="clearfix">
<div class="index-xun-item-left fl">
<a href="#" class="title">英語口語小技巧分享</a>
<p class="date">2020年09月27日</p>
</div>
<a href="#" class="index-xun-item-right fr">
<img src="images/34340_4a110b.jpg" alt="">
</a>
</dd>
</dl>
<dl class="swiper-slide index-column-xun">
<dd class="clearfix">
<div class="index-xun-item-left fl">
<a href="#" class="title">英語口語小技巧分享</a>
<p class="date">2020年09月27日</p>
</div>
<a href="#" class="index-xun-item-right fr">
<img src="images/34340_4a110b.jpg" alt="">
</a>
</dd>
<dd class="clearfix">
<div class="index-xun-item-left fl">
<a href="#" class="title">英語口語小技巧分享</a>
<p class="date">2020年09月27日</p>
</div>
<a href="#" class="index-xun-item-right fr">
<img src="images/34340_4a110b.jpg" alt="">
</a>
</dd>
<dd class="clearfix">
<div class="index-xun-item-left fl">
<a href="#" class="title">英語口語小技巧分享</a>
<p class="date">2020年09月27日</p>
</div>
<a href="#" class="index-xun-item-right fr">
<img src="images/34340_4a110b.jpg" alt="">
</a>
</dd>
</dl>
<dl class="swiper-slide index-column-xun">
<dd class="clearfix">
<div class="index-xun-item-left fl">
<a href="#" class="title">英語口語小技巧分享</a>
<p class="date">2020年09月27日</p>
</div>
<a href="#" class="index-xun-item-right fr">
<img src="images/34340_4a110b.jpg" alt="">
</a>
</dd>
<dd class="clearfix">
<div class="index-xun-item-left fl">
<a href="#" class="title">高考英語語法填空題得分技巧</a>
<p class="date">2020年09月27日</p>
</div>
<a href="#" class="index-xun-item-right fr">
<img src="images/34340_4a110b.jpg" alt="">
</a>
</dd>
</dl>
</div>
</div>
js：
//js
var indexEdu = new Swiper('.index-edu-swiper',{
slidesPerView : 1,
onSlideChangeEnd: function(swiper){
var num=swiper.activeIndex;
$(".index-column-edu-nav").find("li").eq(num).addClass("on").siblings("li").removeClass("on");
}
})
$(document).on("click",".index-column-edu-nav li",function(){
$(this).addClass("on").siblings("li").removeClass("on");
var num=$(this).index();
indexEdu.slideTo(num, 500, false);//切換到第n個(gè)slide，速度為1秒
})
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
js性能優(yōu)化 如何更快速加載你的JavaScript頁面
JavaScript現(xiàn)在極其重要。一些網(wǎng)站使用JavaScript來增添魅力;如今的許多Web應(yīng)用程序依賴它;其中一些甚至是完全用JavaScript編寫而成的。我在本文中將指出一些重要的規(guī)則，介紹如何使用你的JavaScript、使用哪些工具以及你將從中得到什么好處2012-03-03
JavaScript實(shí)現(xiàn)簡(jiǎn)易QQ聊天界面
這篇文章主要為大家詳細(xì)介紹了JavaScript實(shí)現(xiàn)簡(jiǎn)易QQ聊天界面，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-07-07
今天學(xué)習(xí)了js 中confirm的使用方法，confirm() 方法用于顯示一個(gè)帶有指定消息和 OK 及取消按鈕的對(duì)話框。2013-07-07
JS打開層/關(guān)閉層/移動(dòng)層動(dòng)畫效果的實(shí)例代碼
JS打開層/關(guān)閉層/移動(dòng)層動(dòng)畫效果的實(shí)例代碼，需要的朋友可以參考一下2013-05-05
當(dāng)頁面特別長(zhǎng)的時(shí)候，用戶想回到頁面頂部，必須得滾動(dòng)好幾次滾動(dòng)鍵才能回到頂部，如果在頁面右下角有個(gè)“返回頂部”的按鈕，用戶點(diǎn)擊一下，就可以回到頂部，對(duì)于用戶來說，是一個(gè)比較好的體驗(yàn)。2015-05-05
Chrome下ifame父窗口調(diào)用子窗口的問題示例探討
這篇文章主要介紹了Chrome下ifame父窗口調(diào)用子窗口的問題,需要的朋友可以參考下2014-03-03
js中一個(gè)函數(shù)獲取另一個(gè)函數(shù)返回值問題探討
在本文將為大家詳細(xì)探討下js中一個(gè)函數(shù)獲取另一個(gè)函數(shù)返回值問題，比較模糊的朋友可以學(xué)習(xí)下哦2013-11-11
本篇文章給大家詳細(xì)分析了javascript原型及原型鏈的相關(guān)知識(shí)點(diǎn)以及用法分享，有興趣的朋友參考下。2018-03-03
小程序webView實(shí)現(xiàn)小程序內(nèi)嵌H5頁面的全過程
在微信小程序中內(nèi)嵌H5頁面是一種常見的需求,因?yàn)镠5頁面具有靈活性和跨平臺(tái)性,可以彌補(bǔ)小程序原生代碼的不足,這篇文章主要給大家介紹了關(guān)于小程序webView實(shí)現(xiàn)小程序內(nèi)嵌H5頁面的相關(guān)資料,需要的朋友可以參考下2024-07-07
js中string和number類型互轉(zhuǎn)換技巧(分享)
下面小編就為大家?guī)硪黄猨s中string和number類型互轉(zhuǎn)換技巧(分享)。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2016-11-11