swiper轮播切换滑动滚动条自动播放BANNER使用layui选项卡tab效果

lumengabc

已于 2023-08-01 21:05:30 修改

阅读量771

点赞数

文章标签： layui 数学建模 java

于 2023-06-13 13:06:58 首次发布

本文链接：https://blog.csdn.net/webnoties/article/details/131186114

版权

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="//unpkg.com/layui@2.8.6/dist/css/layui.css" rel="stylesheet">
</head>
<body>
<style>
    .top_tab{
        text-align:justify;
        text-align-last:justify;
    }
</style>
<!--https://tool.4xseo.com/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>




    <link
        rel="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="http://qianjing.39gua.com/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>

结束