（swiper插件）轮播图，下面的文字随图片进行翻页

效果：(图片来源网路)

Html:

<!--轮播图-->
        <div class="slider" >
            <div class="swiper-container">
              <div class="swiper-wrapper">
                <div class="swiper-slide"><img src="./1.jpg"></div>
                <div class="swiper-slide"><img src="./2.jpg"></div>
              </div>
            </div>
            <div class="slider_media">
                <div class="page_center media_text">
                    <a href="javascript:;">广播通知：你好 你好你好！！！！</a>
                    <a href="javascript:;">欢迎来到这里，welcome,这是轮播图的第二条消息</a>
                    <div class="swiper-pagination"></div>
                </div>
            </div>
        </div>

css:

　　　　*{
            margin: 0;
            padding: 0;
        }
        .slider {
            width: 100%;
            max-width: 1920px;
            min-width: 900px;
            margin: auto;
            min-height: 300px;
        }
        .swiper-container {
            width: 100%;
            height: 100%;
        }
        .swiper-slide img {
            width: 100%;
            /*height: 706px;*/
        }
        .page_center {
            width: 1260px;
            margin:auto;
            position: relative;
        }
        .slider .slider_media {
            height: 60px;
            line-height: 60px;
            width: 100%;
            position: relative;
            border-top: 1px solid #bfbfbf;
            border-bottom: 1px solid #bfbfbf;
            box-shadow: 0 0px 5px #bcbcbc;
            -webkit-box-shadow: 0 0px 5px #bcbcbc;
            -moz-box-shadow: 0 0px 5px #bcbcbc;
            -ms-box-shadow: 0 0px 5px #bcbcbc;
        }
        .slider .media_text {
            text-indent: 40px;
            background: url('./icon_message.png') no-repeat left 15px;
        }
        .slider .media_text a {
            font-size: 16px;
            color: #000000;
        }
        a
        {
            text-decoration: none;
            color: #000;
        }
        a:focus{outline:none;}
        .slider .swiper-pagination {
            right: 0;
            top: 0;
        }
        .slider .swiper-pagination-bullet {
            margin-left: 12px;
        }

js:

　　　　　$(".slider_media a").hide();
        $(".slider_media a").eq(0).show();

        var swiper = new Swiper('.swiper-container', {
            speed:500,
             pagination: {
                el: '.swiper-pagination',
              },
              loop:true,
            autoplay: {
                 delay: 3000,
                 disableOnInteraction: false,
            },
            on: {
                slideChangeTransitionStart: function(){
                  $(".slider_media a").hide();
                  $(".slider_media a").eq((this.activeIndex-1)%2).fadeIn(300);
                }
            }
        });

来源：https://www.cnblogs.com/snowbxb/p/12420075.html

标签

轮播

swiper