利用Swiper制作横向循环图片

小雨滴答滴答

已于 2024-04-30 10:45:30 修改

阅读量54

点赞数 3

分类专栏： WEB 文章标签： html5

于 2024-04-30 10:43:36 首次发布

本文链接：https://blog.csdn.net/qq_23565865/article/details/138338258

版权

WEB 专栏收录该内容

4 篇文章 0 订阅

订阅专栏


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Swiper横向切换</title>
    
    <link rel="stylesheet" href="./css/swiper.min.css">
    <script src="./js/swiper.min.js"></script>
    <style>
            #imagesShow {
                position: relative;
                width: 1200px;
                margin: 0 auto;
            }

            #imagesShow .swiper-container {
                padding-bottom: 60px;
            }

            #imagesShow .swiper-slide {
                width: 520px;
                height: 408px;
                background: #fff;
                box-shadow: 0 8px 30px #ddd;
            }

            #imagesShow .swiper-slide img {
                display: block;
                width: 520px;
                height: 408px;
            }

            #imagesShow .swiper-pagination {
                width: 100%;
                bottom: 20px;
            }

            #imagesShow .swiper-pagination-bullets .swiper-pagination-bullet {
                margin: 0 5px;
                border: 3px solid #fff;
                background-color: #d5d5d5;
                width: 10px;
                height: 10px;
                opacity: 1;
            }

            #imagesShow .swiper-pagination-bullets .swiper-pagination-bullet-active {
                border: 3px solid #00aadc;
                background-color: #fff;
            }


                #imagesShow .swiper-button-prev:hover {
                    background-color: #eef7fa;
                }
                #imagesShow .swiper-button-next:hover {
                    background-color: #eef7fa;
                }
    </style>
</head>
<body>
    <div id="imagesShow">
        <div class="swiper-container">
            <div class="swiper-wrapper">
                <div class="swiper-slide"><img src="./images/images-show01.jpg"/></div>
                <div class="swiper-slide"><img src="./images/images-show02.jpg"/></div>
                <div class="swiper-slide"><img src="./images/images-show03.jpg"/></div>
                <div class="swiper-slide"><img src="./images/images-show04.jpg"/></div>
                <div class="swiper-slide"><img src="./images/images-show05.jpg"/></div>
            </div>
        </div>
        <div class="swiper-pagination"></div>
        <div class="swiper-button-prev"></div>
        <div class="swiper-button-next"></div>
    </div>
    <script>
        imagesShowSwiper = new Swiper('#imagesShow .swiper-container', {
            watchSlidesProgress: true,
            slidesPerView: 'auto',
            centeredSlides: true,
            loop: true,
            loopedSlides: 5,
            autoplay: true,
            navigation: {
                nextEl: '.swiper-button-next',
                prevEl: '.swiper-button-prev',
            },
            pagination: {
                el: '.swiper-pagination',
                //clickable :true,
            },
            on: {
                progress: function (progress) {
                    for (i = 0; i < this.slides.length; i++) {
                        var slide = this.slides.eq(i);
                        var slideProgress = this.slides[i].progress;
                        modify = 1;
                        if (Math.abs(slideProgress) > 1) {
                            modify = (Math.abs(slideProgress) - 1) * 0.3 + 1;
                        }
                        translate = slideProgress * modify * 260 + 'px';
                        scale = 1 - Math.abs(slideProgress) / 5;
                        zIndex = 999 - Math.abs(Math.round(10 * slideProgress));
                        slide.transform('translateX(' + translate + ') scale(' + scale + ')');
                        slide.css('zIndex', zIndex);
                        slide.css('opacity', 1);
                        if (Math.abs(slideProgress) > 3) {
                            slide.css('opacity', 0);
                        }
                    }
                },
                setTransition: function (transition) {
                    for (var i = 0; i < this.slides.length; i++) {
                        var slide = this.slides.eq(i)
                        slide.transition(transition);
                    }
                }
            }
        })
    </script>
</body>
</html>

源码下载：https://download.csdn.net/download/qq_23565865/89246221