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") }) })
原文地址:https://www.cnblogs.com/yangjinggui/p/12056479.html
时间: 2024-10-25 07:07:41