无缝轮播图效果

最新推荐文章于 2024-10-17 18:29:30 发布

前端小白之路

最新推荐文章于 2024-10-17 18:29:30 发布

阅读量170

点赞数

分类专栏： javascript 文章标签： css html js

本文链接：https://blog.csdn.net/m0_46597790/article/details/106757729

版权

javascript 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

无缝轮播图效果

废话不多说,代码走起

*html部分*
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>轮播图</title>
    <link rel="stylesheet" href="css/swiper.min.css">
    <link rel="stylesheet" href="css/index.css">
</head>

<body>
<h1>轮播图</h1>
<div class="dowebok">
    <div class="swiper-container">
        <div class="swiper-wrapper">
            <div class="swiper-slide">
                <img data-src="images/1.jpg" class="swiper-lazy" alt="">
            </div>
            <div class="swiper-slide">
                <img data-src="images/2.jpg" class="swiper-lazy" alt="">
            </div>
            <div class="swiper-slide">
                <img data-src="images/3.jpg" class="swiper-lazy" alt="">
            </div>
            <div class="swiper-slide">
                <img data-src="images/4.jpg" class="swiper-lazy" alt="">
            </div>
            <div class="swiper-slide">
                <img data-src="images/5.jpg" class="swiper-lazy" alt="">
            </div>
            <div class="swiper-slide">
                <img data-src="images/6.jpg" class="swiper-lazy" alt="">
            </div>
        </div>
        <div class="swiper-pagination"></div>
        <span class="swiper-button-next"></span>
        <span class="swiper-button-prev"></span>
    </div>
</div>

<script src="js/jquery.min.js"></script>
<script src="js/swiper.min.js"></script>
<script src="js/index.js"></script>

</body>
</html>

*css部分*
h1{text-align: center;}
.dowebok { margin: 0 auto;}
.swiper-container { margin: 0 auto; overflow: visible;}
.swiper-container:hover .swiper-button-next, .swiper-container:hover .swiper-button-prev { display: block;}
.swiper-slide { position: relative; opacity: 0 !important;}
.swiper-slide img { width: 100%;}
.swiper-slide-active { opacity: 1 !important;}
.swiper-slide .ren { position: absolute; left: 0; top: 0; width: 1436px; height: 840px;}
.swiper-button-next, .swiper-button-prev { display: none; width: 40px; height: 68px; background-size: contain;}
.swiper-button-next { right: 100px; background-image: url(../images/next.png);}
.swiper-button-prev { left: 100px; background-image: url(../images/prev.png);}
.swiper-container-horizontal .swiper-pagination-bullets { bottom: 40px;}
.swiper-pagination-bullet { width: 70px; height: 4px; margin: 0 10px !important; padding: 6px 0; border-radius: 0; background-color: transparent; opacity: 1;}
.swiper-pagination-bullet:after { content: ""; display: block; height: 4px; background-color: #fff; opacity: 0.5;}
.swiper-pagination-bullet:hover:after, .swiper-pagination-bullet-active:after { background-color: #000;}

*javascript部分*
$(function () {
    var mySwiper = new Swiper('.swiper-container', {
        effect: 'fade',
        autoplay: true,
        loop: true,
        pagination: {
            el: '.swiper-pagination',
            clickable: true
        },
        navigation: {
            nextEl: '.swiper-button-next',
            prevEl: '.swiper-button-prev'
        },
        lazy: {
            loadPrevNext: true
        }
    })
})