博客

使用的大前提

需要引入 swiper.css swiper.js  jquery.js

html

    <div class="gsdt_left">


        <!-- 下面的轮播 -->
        <div class="gsdt_swiper">
            <div class="swiper-container swiper-container3">
                <div class="swiper-wrapper">
                    <div class="swiper-slide">
                        <img src="res/default/images/ggdt.png" alt="">
                        <!-- <p>111</p> -->
                    </div>
                    <div class="swiper-slide">
                        <img src="res/default/images/ggdt.png" alt="">
                    </div>
                    <div class="swiper-slide">
                        <img src="res/default/images/ggdt.png" alt="">
                    </div>
                    <div class="swiper-slide">
                        <img src="res/default/images/ggdt.png" alt="">
                    </div>
                </div>
                <!-- Add Pagination -->
                <div class="swiper-pagination"></div>
            </div>
        </div>

        <!-- 列表 74-->
        <div class="gsdt_list ">
            <a href="">
                <div class="gsdt_list_con">
                    <p class="gsdt_list_con_qw1">“挑战自我·健康生活”徒步拓展活动圆</p>
                    <p class="gsdt_list_con_qw2">
                        <span>2019-03-15</span>&emsp;
                        <span>More >></span>
                    </p>
                    <p class="kailong"></p>
                </div>
            </a>
            <a href="">
                <div class="gsdt_list_con">
                    <p class="gsdt_list_con_qw1">提升执行力 打造一流团队 ——实效管理咨</p>
                    <p class="gsdt_list_con_qw2">
                        <span>2019-03-15</span>&emsp;
                        <span>More >></span>
                    </p>
                    <p class="kailong"></p>
                </div>
            </a>
            <a href="">
                <div class="gsdt_list_con">
                    <p class="gsdt_list_con_qw1">2019朝阳公司年初春季培训大会</p>
                    <p class="gsdt_list_con_qw2">
                        <span>2019-03-15</span>&emsp;
                        <span>More >></span>
                    </p>
                    <p class="kailong"></p>
                </div>
            </a>
            <a href="">
                <div class="gsdt_list_con">
                    <p class="gsdt_list_con_qw1">2018“熔炼团队，迎接未来”拓展活动</p>
                    <p class="gsdt_list_con_qw2">
                        <span>2019-03-15</span>&emsp;
                        <span>More >></span>
                    </p>
                    <p class="kailong"></p>
                </div>
            </a>

        </div>
    </div>

js

 var swipersbb = new Swiper('.swiper-container3.swiper-container', {
        autoplay: {
            delay: 1000,
            disableOnInteraction: false,
        },
        effect: 'fade',
        watchSlidesProgress: true,
        observer: true,
        observeParents: true,
        pagination: {
            el: '.swiper-container3 .swiper-pagination',
        },
        on: {
            slideChange: function () {
                $(".gsdt_list>a").each(function (i, e) {
                    if (swipersbb.activeIndex == i) {
                        $(e).siblings().find(".gsdt_list_con").removeClass("curr");
                        $(e).find(".gsdt_list_con").addClass("curr");
                    }
                })
            },
        },

    });
    $(".gsdt_list>a").each(function (i, e) {
        if (i == 0) {
            $(e).find(".gsdt_list_con").addClass("curr");
        }
        $(e).mouseover(function () {
            $(this).siblings().find(".gsdt_list_con").removeClass("curr");
            $(this).find(".gsdt_list_con").addClass("curr");
            swipersbb.slideTo(i, 500, false);
        })
    })

css

.gsdt_left {
            width: 62%;
            float: left;
        }

        .title_right {
            font-size: 18px;
            color: #999;
        }

        .gsdt {
            margin-top: 40px;
        }

        .gsdt_left_title {
            margin-bottom: 40px;
            border-bottom: solid #ddd 1px;
        }

        .gsdt_right_title {
            overflow: hidden;
            border-bottom: solid #ddd 1px;
            margin-bottom: 40px;
        }

        .gsdt_list {
            float: left;
            width: 46%;
        }

        .gsdt_list_con {
            height: 74px;
            /* background: #db2f28; */
            position: relative;
            border-bottom: solid #e4e4e4 1px;
            /* margin-left: 20px; */
            line-height: 26px;
            text-indent: 2rem;
        }

        .gsdt_list_con_qw1 {
            font-size: 16px;
            color: #333;
            padding-top: 11px;
        }

        .gsdt_list_con_qw2 {
            font-size: 14px;
            color: #afafaf;
        }

        .gsdt_list>a {
            text-decoration: none;
        }

        .kailong {
            width: 0;
            height: 0;
            border-top: 15px solid transparent;
            border-bottom: 15px solid transparent;
            border-right: 15px solid #db2f28;
            position: absolute;
            top: 25px;
            left: -15px;
            z-index: 9;
            display: none;
        }



        .gsdt_list_con.curr {
            background: #dc2f29;
            position: relative;
        }

        .gsdt_list_con.curr .gsdt_list_con_qw2 {
            color: #FFF;
        }

        .gsdt_list_con.curr .gsdt_list_con_qw2::before {
            background: #FFF;
        }

        .gsdt_list_con.curr .gsdt_list_con_qw1 {
            color: #FFF;
        }

        .gsdt_list_con.curr .gsdt_list_con_qw1::before {
            background: #FFF;
        }

        .gsdt_list_con.curr::before {
            content: '';
            width: 0;
            height: 0;
            border-top: 10px solid transparent;
            border-bottom: 10px solid transparent;
            border-right: 10px solid #dc2f29;
            position: absolute;
            left: -10px;
            top: 0;
            bottom: 0;
            margin: auto;
            z-index: 99;
        }

        .swiper-slide {
            text-align: center;
            font-size: 18px;

            /* 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;
        }


        .gsdt_swiper {
            position: relative;
            height: 100%;
            width: 400px;
            float: left;
        }

        .swiper-container3 .swiper-pagination-bullet {
            width: 12px;
            height: 12px;
            background-color: #d6d6d6 !important;
            opacity: 1 !important;
        }

        .swiper-container3 .swiper-pagination-bullet-active {
            width: 36px;
            height: 12px;
            background-color: #efbb4e !important;
            border-radius: 6px;
        }

        .swiper-container3 .swiper-pagination-bullets {
            left: 130px !important;
        }