Swiper轮播凸显效果

最新推荐文章于 2024-04-16 09:53:24 发布

看到代码头都是大的

最新推荐文章于 2024-04-16 09:53:24 发布

阅读量605

点赞数 1

分类专栏：前端

本文链接：https://blog.csdn.net/ym5209999/article/details/104900000

版权

前端专栏收录该内容

22 篇文章 0 订阅

订阅专栏

实现效果如下：
效果图
程序结构如下：

话不多说，直接上代码：
index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>swiper运用</title>
    <link type="text/css" rel="stylesheet" href="../css/swiper.css">
    <link type="text/css" rel="stylesheet" href="../css/style.css">
    <script type="text/javascript" src="../js/swiper.js"></script>
    <script type="text/javascript" src="../js/jquery-3.3.1.js"></script>
</head>
<body>

<div class="photo">
    <div class="swiper-container">
        <div class="swiper-wrapper">
            <div class="swiper-slide">
                <img src="../images/01.jpg">
                <p>第01张</p>
            </div>
            <div class="swiper-slide">
                <img src="../images/02.jpg">
                <p>第02张</p>
            </div>
            <div class="swiper-slide">
                <img src="../images/03.jpg">
                <p>第03张</p>
            </div>
            <div class="swiper-slide">
                <img src="../images/04.jpg">
                <p>第04张</p>
            </div>
            <div class="swiper-slide">
                <img src="../images/05.jpg">
                <p>第05张</p>
            </div>
            <div class="swiper-slide">
                <img src="../images/06.jpg">
                <p>第06张</p>
            </div>
            <div class="swiper-slide">
                <img src="../images/07.jpg">
                <p>第07张</p>
            </div>
            <div class="swiper-slide">
                <img src="../images/08.jpg">
                <p>第08张</p>
            </div>
            <div class="swiper-slide">
                <img src="../images/09.jpg">
                <p>第09张</p>
            </div>
            <div class="swiper-slide">
                <img src="../images/10.jpg">
                <p>第10张</p>
            </div>
        </div>
        <div class="swiper-button-prev"></div>
        <div class="swiper-button-next"></div>
    </div>
</div>


<script src="../js/index.js"></script>
</body>
</html>

style.css

* {
    padding: 0;
    margin: 0;
}

body {
    background: #eeeeee;
}

.photo {
    width: 850px;
    height: 145px;
    text-align: center;
    margin: 200px auto;
    background: deeppink;
}

.photo .swiper-slide > img {
    width: 100px;
    height: 100px;
    margin-top: 10px;
}

.swiper-container {
    overflow: visible;
}

.swiper-button-prev {
    left: -20px;
}

.swiper-button-next {
    right: -20px;
}

.opacity_3 {
    opacity: 0.3 !important;
}

.opacity_10 {
    opacity: 1 !important;
}

index.js

function swiperAutoPlay() {
    $('.photo .swiper-wrapper .swiper-slide:gt(5)').addClass('opacity_3'); //:gt(num)也是一种选择器
    var photosLength = $('.photo .swiper-wrapper .swiper-slide').length;
    var mySwiper = new Swiper('.swiper-container', {
        initialSlide: 0, //默认从第几张图片开始，初始值为：0
        on: {
            // 点击左右按钮触发方法
            slidePrevTransitionStart: function () {
                for (var i = 0; i < photosLength; i++) {
                    $('.photo .swiper-wrapper .swiper-slide').eq(i).addClass('opacity_3').removeClass('opacity_10');
                }

                for (var j = this.activeIndex; j < this.activeIndex + 6; j++) {
                    $('.photo .swiper-wrapper .swiper-slide').eq(j).addClass('opacity_10').removeClass('opacity_3');
                }
            },
            slideNextTransitionStart: function () {
                for (var i = 0; i < photosLength; i++) {
                    $('.photo .swiper-wrapper .swiper-slide').eq(i).addClass('opacity_3').removeClass('opacity_10');
                }

                for (var j = this.activeIndex; j < this.activeIndex + 6; j++) {
                    $('.photo .swiper-wrapper .swiper-slide').eq(j).addClass('opacity_10').removeClass('opacity_3');
                }
            },
        },
        navigation: {
            // 左右按钮
            nextEl: '.swiper-button-next',
            prevEl: '.swiper-button-prev',
        },
        slidesPerView: 6, //同时能够显示的数量
        slidesPerGroup: 1, //设置几张图片为一组

    });
}

swiperAutoPlay();

本文使用库相关链接:
swiper.css，提取码：z5bq。
swiper.js，提取码：e9ed。
jquery-3.3.1.js，提取码：cqh0。

看到代码头都是大的

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Swiper轮播凸显效果

实现效果如下：程序结构如下：话不多说，直接上代码：index.html<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>swiper运用</title> <link type="text/css"...
复制链接

扫一扫