實(shí)現(xiàn)思路

監(jiān)聽上劃和下滑事件芭商，當(dāng)下滑都第三個(gè)或第一個(gè)swiper的時(shí)候馬上切換到第二個(gè)swiper并更新第一個(gè)和第三個(gè)swiper里面的內(nèi)容

1.引入swiper css 和 js 文件 下載地址

2.定義樣式

        <style type="text/css">
            .swiper-container {
                width: 100%;
                height: 100%;
            }
            
            .swiper-slide {
                width: 100%;
                height: 100%;
                position: relative;
            }
            
            .firstBg,
            .secondBg,
            .threeBg {
                width: 100%;
                height: 100%;
                object-fit: cover;
            }
        </style>

3.html內(nèi)容

        <div class="swiper-container">
            <div class="swiper-wrapper">
                <div class="swiper-slide">
                    <img class="firstBg" src="" />
                </div>
                <div class="swiper-slide">
                    <img class="secondBg" src="" />
                </div>
                <div class="swiper-slide">
                    <img class="threeBg" src="" />
                </div>
            </div>
        </div>

4. js內(nèi)容

    // 分頁
    var page = 0;
    // 播放的列表
    var list = [];
    var first = true;

    var current = 0;

    var mySwiper = new Swiper('.swiper-container', {
        initialSlide: 1,
        direction: 'vertical',
        allowSlidePrev: false,
    })
    init();

    function init() {
        getVideo();
    }

    function getVideo() {
        $.ajax({
            url: "/user/v3_3_0/home",
            headers: {
                platform: 3
            },
            data: {
                type: 1,
                page: page,
            },
            method: 'get',
            beforeSend: function() {
                Loading.show({
                    type: 6
                });
            }
        }).done(function(res) {
            Loading.hide();
            if(res.code != 1) {
                Toast({
                    message: res.msg
                })
                return;
            }
            list = list.concat(res.data.topic_list);
            if(list.length > 100) {
                var deleteLength = list.length - 100;
                list = list.splice(deleteLength, 100);
                current -= deleteLength;
            }
            if(first) {
                first = false;
                if(list[0]) {
                    $('.secondBg').prop('src', list[0].cover_url);
                }
                if(list[1]) {
                    $('.threeBg').prop('src', list[1].cover_url);
                }

                mySwiper.on('slidePrevTransitionEnd', function() {
                    current--;
                    if(mySwiper.activeIndex == 0) {
                        mySwiper.slideTo(1, 0, false);
                    }
                    if(current == 0) {
                        mySwiper.allowSlidePrev = false;
                    } else {
                        $('.firstBg').prop('src', list[current - 1].cover_url);
                    }
                    $('.secondBg').prop('src', list[current].cover_url);
                    $('.threeBg').prop('src', list[current + 1].cover_url);
                });

                mySwiper.on('slideNextTransitionEnd', function() {
                    current++;
                    if(!mySwiper.allowSlidePrev) {
                        mySwiper.allowSlidePrev = true;
                    }
                    if(mySwiper.activeIndex == 2) {
                        mySwiper.slideTo(1, 0, false);
                    }
                    $('.firstBg').prop('src', list[current - 1].cover_url);
                    $('.secondBg').prop('src', list[current].cover_url);
                    $('.threeBg').prop('src', list[current + 1].cover_url);
                    if(list.length - current <= 3) {
                        getVideo();
                    }
                });
            }
            if(res.data.video_flag == 1) {
                page++;
            } else if(res.data.video_flag == 2) {
                page = 1;
            }
        }).fail(function(res) {
            Toast({
                message: "網(wǎng)絡(luò)出錯(cuò)了"
            })
            Loading.hide();
        });
    }