本文實例為大家分享了swiper實現導航滾動效果的具體代碼，供大家參考，具體內容如下
1.需求：點擊導航科目，選中元素自動往前滑動處于中間位置，tab切換
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
|
<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>英語培訓 </h4> <p>English training</p> </li> <li class="swiper-slide"> <h4>早教 </h4> <p>Early education</p> </li> <li class="swiper-slide"> <h4>設計培訓 </h4> <p>Design training</p> </li> <li class="swiper-slide"> <h4>舞蹈培訓 </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">高考復讀培訓班</p> </a> <a href="#" class="course-item-jg">濟南大智學校</a> </li> <li> <a href="#" > <div class="course-item-logo"> <img src="images/12120_621da.jpg" alt=""> </div> <p class="course-item-name">高考復讀培訓班</p> </a> <a href="#" class="course-item-jg">濟南大智學校</a> </li> <li> <a href="#" > <div class="course-item-logo"> <img src="images/12120_621da.jpg" alt=""> </div> <p class="course-item-name">高考復讀培訓班</p> </a> <a href="#" class="course-item-jg">濟南大智學校</a> </li> <li> <a href="#" > <div class="course-item-logo"> <img src="images/12120_621da.jpg" alt=""> </div> <p class="course-item-name">高考復讀培訓班</p> </a> <a href="#" class="course-item-jg">濟南大智學校</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">高考復讀培訓高考復讀培訓班</p> </a> <a href="#" class="course-item-jg">濟南大智學校</a> </li> <li> <a href="#" > <div class="course-item-logo"> <img src="images/12120_621da.jpg" alt=""> </div> <p class="course-item-name">高考復讀培訓班</p> </a> <a href="#" class="course-item-jg">濟南大智學校</a> </li> <li> <a href="#" > <div class="course-item-logo"> <img src="images/12120_621da.jpg" alt=""> </div> <p class="course-item-name">高考復讀培訓班</p> </a> <a href="#" class="course-item-jg">濟南大智學校</a> </li> <li> <a href="#" > <div class="course-item-logo"> <img src="images/12120_621da.jpg" alt=""> </div> <p class="course-item-name">高考復讀培訓班</p> </a> <a href="#" class="course-item-jg">濟南大智學校</a> </li> </ul> </div></div> |
js：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
|
var mySwiper = new Swiper('.city-column-course', { freeMode: true, freeModeMomentumRatio: 0.5, slidesPerView: 'auto', }); //滑動列表，導航滑動到相應科目并居中顯示 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; // 被點擊slide的中心點 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; // 被點擊slide的中心點 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);//切換到第一個slide}); |
2.需求：滑動這塊，導航選中的元素隨著變化
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
|
<ul class="index-column-edu-nav clearfix"> <li class="on"><a href="javascript:;" >培訓匯</a></li> <li><a href="javascript:;" >最新知識</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：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
|
//jsvar 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個slide，速度為1秒 }) |
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持服務器之家。
原文鏈接：https://blog.csdn.net/lxhmm921/article/details/109242870
