swiper实现tab切换效果例子
直接上代码：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <link rel="stylesheet" type="text/css" href="uu/swiper-4.4.1.min.css"/> <style type="text/css"> *{ padding: 0; margin: 0; } #tab{ width: 600px; height: 500px; margin:50px auto; border: 2px solid blue; position: relative; } #tab ul li{ float: left; width: 200px; height: 50px; text-align: center; line-height: 50px; font-size: 30px; color: white; list-style: none; } #tab .swiper-container{ position: absolute; width: 600px; height: 430px; top: 70px; left: 0; } </style> </head> <body> <div id="tab"> <ul> <li style="background: darkcyan;">新闻</li> <li style="background: darkgoldenrod;">体育</li> <li style="background: darkmagenta;">娱乐</li> </ul> <div class="swiper-container"> <div class="swiper-wrapper"> <div class="swiper-slide" style="background: darkcyan;">Slide 1</div> <div class="swiper-slide" style="background: darkgoldenrod;">Slide 2</div> <div class="swiper-slide" style="background: darkmagenta;">Slide 3</div> </div> </div> </div> <script src="uu/swiper-4.4.1.min.js" type="text/javascript"></script> <script src="uu/jquery-1.11.3.min.js.js" type="text/javascript"></script> <script> var mySwiper = new Swiper ('.swiper-container', { direction: 'vertical', // 垂直切换选项 // loop: true, // 循环模式选项 下面发现那个mySwiper.slideTo(t, 1000, false)位置不正确，点第一个显示第二个 //原因是loop 这个循环自动在前面多加一个，所以点第一个显示第二个，我们把这个关掉就正确了 simulateTouch : false, //禁止鼠标模拟 //effect : 'fade', //切换效果 淡入淡出 effect : "cube", //切换效果 : 3D效果 }) $('#tab ul li').click(function(){ // 获得当前点击li的序号 var t=$(this).index(); mySwiper.slideTo(t, 1500, false);//切换到第一个slide，速度为1秒 }) </script> </body> </html> 上面代码静态效果图片（动态效果直接复印代码自已去试）：
本站声明:网站内容来源于网络,如有侵权,请联系我们https://www.qiquanji.com,我们将及时处理。
微信扫码关注
更新实时通知