html
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <meta name="viewport" content="width=device-width, initial-scale=1.0">
6 <meta http-equiv="X-UA-Compatible" content="ie=edge">
7 <script src="./jquery/jquery-3.4.1/jquery-3.4.1.js"></script>
8 <script src="./swiper/swiper.js"></script>
9 <title>Document</title>
10 <link rel="stylesheet" href="./swiper/swiper.css">
11
12 </head>
13 <body>
14 <div class="wrap">
15 <div class="nav">
16 <ul>
17 <li class="active">菜單1</li>
18 <li>菜單2</li>
19 <li>菜單3</li>
20 <li>菜單4</li>
21 </ul>
22 </div>
23 <div class="swiper-container">
24 <div class="swiper-wrapper">
25 <div class="swiper-slide">Slide 1</div>
26 <div class="swiper-slide">Slide 2</div>
27 <div class="swiper-slide">Slide 3</div>
28 <div class="swiper-slide">Slide 4</div>
29 </div>
30 <!-- 如果需要分頁器 -->
31 <div class="swiper-pagination"></div>
32
33 <!-- 如果需要導航按鈕 -->
34 <div class="swiper-button-prev"></div>
35 <div class="swiper-button-next"></div>
36
37 <!-- 如果需要滾動條 -->
38 <div class="swiper-scrollbar"></div>
39 </div>
40 </div>
41 </body>
42 <script src="./index.js"></script>
43 </html>
css
<style>
*{
margin: 0;
padding: 0;
list-style: none;
}
.wrap{
width: 400px;
height: 300px;
margin: 0 auto;
}
.nav{
width: 100%;
height: 100px;
display: flex;
}
.nav ul{
flex: 1;
display: flex;
align-items: center;
justify-content: space-around;
}
.nav li.active{
color:#999;
}
.swiper-slide{
width: 100%;
height: 200px;
text-align: center;
line-height: 200px;
background: cornsilk;
}
</style>
js
$(document).ready(function(){
// 初始化swiper輪播插件
var mySwiper = new Swiper ('.swiper-container', {
direction: 'horizontal', // 橫向切換選項
loop: true, // 循環模式選項
speed:300, //切換速度
autoplay: {
delay: 3000,//延遲切換
stopOnLastSlide: false,//如果設置為true，當切換到最后一個slide時停止自動切換。（loop模式下無效）。
disableOnInteraction: false, //如果設置為false，用戶操作swiper之后自動切換不會停止，每次都會重新啟動autoplay。
},
on: { //回調函數，swiper從當前slide開始過渡到另一個slide時執行。
slideChangeTransitionStart: function(){
var index = this.realIndex; //當前活動塊的索引，與activeIndex不同的是，在loop模式下不會將復制的塊的數量計算在內。
$(".nav li").eq(index).addClass("active").siblings().removeClass("active");//根據活動塊的索引切換每個li的字體顏色
},
},
// 如果需要分頁器
pagination: {
el: '.swiper-pagination',
},
// 如果需要前進后退按鈕
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
// 如果需要滾動條
scrollbar: {
el: '.swiper-scrollbar',
},
})
// 獲取到導航條的所有li
$(".nav li").click(function(){
// 獲取到當前點擊li的索引值
var index = $(this).index();
mySwiper.slideToLoop(index, 1000, false);//切換到第一個slide，速度為1秒
$(this).addClass("active").siblings().removeClass("active")
})
})
