swiper轮播切换滑动滚动条自动播放BANNER使用layui选项卡tab效果
Swiper演示 - Swiper中文网
事件API：slideChangeTransitionStart(swiper)_Swiper参数选项
layui:https://layui.dev/docs/2.8/tab/#brief
开始
<!DOCTYPE html><html><head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1"><title>Demo</title><!-- 请勿在项目正式环境中引用该 layui.css 地址 --><link href="///layui@2.8.6/dist/css/layui.css" rel="stylesheet"></head><body><style>.top_tab{text-align:justify;text-align-last:justify;}</style><!--/a/20.html--><div class="layui-tab layui-tab-brief"><ul class="layui-tab-title top_tab"><li id="layui_this_0" class="layui-this tab_top" index_val="1">标签1</li><li id="layui_this_1" class="tab_top" index_val="2">标签2</li><li id="layui_this_2" class="tab_top" index_val="3">标签3</li><li id="layui_this_3" class="tab_top" index_val="4">标签4</li><li id="layui_this_4" class="tab_top" index_val="5">标签5</li></ul><linkrel="stylesheet"href="swiper-bundle.min.css"/><!-- Demo styles --><style>.swiper {width: 100%;height: 100%;}.swiper-slide {text-align: center;font-size: 18px;background: #fff;/* Center slide text vertically */display: -webkit-box;display: -ms-flexbox;display: -webkit-flex;display: flex;-webkit-box-pack: center;-ms-flex-pack: center;-webkit-justify-content: center;justify-content: center;-webkit-box-align: center;-ms-flex-align: center;-webkit-align-items: center;align-items: center;}.swiper-slide img {display: block;width: 100%;height: 100%;object-fit: cover;}</style><!-- Swiper --><div class="swiper mySwiper"><div class="swiper-wrapper"><div class="swiper-slide">Slide 1</div><div class="swiper-slide">Slide 2</div><div class="swiper-slide">Slide 3</div><div class="swiper-slide">Slide 4</div><div class="swiper-slide">Slide 5</div></div><div class="swiper-scrollbar"></div></div><!-- Swiper JS --><script src="swiper-bundle.min.js"></script><script src="jquery-1.11.1.min.js"></script><!-- Initialize Swiper --><script>function aa(index_val){var id = "#layui_this_"+index_val;console.log(id);$(".layui-this").removeClass("layui-this");$(id).addClass("layui-this");// $(id).attr("index_val", index_val);}var swiper = new Swiper(".mySwiper", {scrollbar: {el: ".swiper-scrollbar",hide: true,autoplay:true,loop:true},on: {slideChangeTransitionStart: function(){//alert(this.activeIndex);var index_val = this.activeIndex;aa(index_val);},},});$(".tab_top").click(function(){var index_val = $(this).attr("index_val");index_val = index_val-1;console.log("index_val:"+index_val);swiper.slideTo(index_val);});</script></div></body></html>
另一个可以轮播的代码：
<div class="banner" style="width:1900px;height: 480px;"><!-- Swiper --><link rel="stylesheet" href="/jscss/swiper-bundle.min.css" /><!-- Demo styles --><style>.swiper {width: 100%;height: 100%;}.swiper-slide {text-align: center;font-size: 18px;background: #fff;/* Center slide text vertically */display: -webkit-box;display: -ms-flexbox;display: -webkit-flex;display: flex;-webkit-box-pack: center;-ms-flex-pack: center;-webkit-justify-content: center;justify-content: center;-webkit-box-align: center;-ms-flex-align: center;-webkit-align-items: center;align-items: center;}.swiper-slide img {display: block;width: 100%;height: 100%;object-fit: cover;}</style><div class="swiper mySwiper" style=""><div class="swiper-wrapper"><div class="swiper-slide"><img src="/images/banner.jpg"></div><div class="swiper-slide">Slide 2</div><div class="swiper-slide">Slide 3</div><div class="swiper-slide">Slide 4</div></div><div class="swiper-button-next"></div><div class="swiper-button-prev"></div></div><!-- Swiper JS --><script src="/jscss/swiper-bundle.min.js"></script><!-- Initialize Swiper --><script>var swiper = new Swiper(".mySwiper", {autoplay: true,//自动切换时间loop:true,navigation: {nextEl: ".swiper-button-next",prevEl: ".swiper-button-prev",},});</script></div>
结束
