CSS——网易云音乐首页之轮播图的实现（swiper的用法）

前言

       今天要和大家分享的是网易云音乐首页中轮播图区域的实现过程

---

提示：以下是本篇文章正文内容，下面案例可供参考

一、结构的分析

      这里是使用swiper插件实现轮播图，关于swiper插件的用法在以往的文章中有讲到过，对是哦也使用方法太明白的同学可以翻阅查看一下。关于结构的划分大概可分为如下几个部分

示例图：

 

二、实现过程

1.HTML结构

代码如下（示例）：

<!-- 轮播图区域 -->
        <div class="outer">
            <div class="swiper-inner">
                <div class="swiper">
                    <div class="swiper-wrapper">
                        <div class="swiper-slide"><img src="../img/首页图库/banner1.jpg" alt=""></div>
                        <div class="swiper-slide"><img src="../img/首页图库/banner2.jpg" alt=""></div>
                        <div class="swiper-slide"><img src="../img/首页图库/banner3.jpg" alt=""></div>
                        <div class="swiper-slide"><img src="../img/首页图库/banner4.jpg" alt=""></div>
                        <div class="swiper-slide"><img src="../img/首页图库/banner5.jpg" alt=""></div>
                        <div class="swiper-slide"><img src="../img/首页图库/banner6.jpg" alt=""></div>
                        <div class="swiper-slide"><img src="../img/首页图库/banner7.jpg" alt=""></div>
                        <div class="swiper-slide"><img src="../img/首页图库/banner1.jpg" alt=""></div>
                        <div class="swiper-slide"><img src="../img/首页图库/banner2.jpg" alt=""></div>

                    </div>
                    <!-- 如果需要分页器 -->
                    <div class="swiper-pagination"></div>

                    <!-- 如果需要导航按钮 -->
                    <div class="swiper-button-prev prev"></div>
                    <div class="swiper-button-next next"></div>
                </div>
                <script>
                    var mySwiper = new Swiper('.swiper', {
                        autoplay: true,
                        loop: true, // 循环模式选项

                        // 如果需要分页器
                        pagination: {
                            el: '.swiper-pagination',
                            clickable: true,
                        },

                        // 如果需要前进后退按钮
                        navigation: {
                            nextEl: '.swiper-button-next',
                            prevEl: '.swiper-button-prev',
                        },


                    })        
                </script>
                <!-- 下载客户端区域 -->
                <div class="download-app">
                    <a href="./download.html" id="btn"></a>
                    <p>PC 安卓 iPhone WP iPad Mac 六大客户端</p>
                </div>

            </div>
        </div>

2.CSS样式

代码如下（示例）：

   /* 轮播图区域样式 */
        .outer {
            width: 100%;
            height: 285px;
            background-image: url(../img/首页图库/background-image2.jpg);
        }

        .swiper-inner {
            position: relative;
            width: 984px;
            height: 285px;
            margin: 0 auto;
        }

        .swiper {
            width: 100%;
            height: 285px;
            overflow: hidden;
        }

        .swiper-wrapper>div>img {
            width: 730px;
            height: 285px;
        }

        .prev {
            position: absolute;
            left: -68px;
            top: 50%;
            display: block;
            width: 37px;
            height: 63px;
            background-image: url(../img/首页图库/首页轮播图.png);
            background-position: 0 -360px;
        }

        .prev:hover {
            background-image: url(../img/首页图库/首页轮播图.png);
            background-position: 0 -430px;
        }

        .next {
            display: block;
            position: absolute;
            top: 50%;
            margin-top: -31px;
            width: 37px;
            height: 63px;
            right: -68px;
            background-image: url(../img/首页图库/首页轮播图.png);
            background-position: 0 -508px;
        }
        .next:hover{
            background-image: url(../img/首页图库/首页轮播图.png);
            background-position: 0 -578px;
        }

        .download-app {
            position: absolute;
            top: 0;
            left: 730px;
            width: 254px;
            height: 285px;
            background-image: url(../img/首页图库/download.png);
            z-index: 20;
            border-left: 1px solid #292725;
            border-right: 1px solid #292725;
        }

        .download-app>#btn {
            display: inline-block;
            width: 215px;
            height: 56px;
            margin: 186px 0 0 19px;
        }

        .download-app>#btn:hover {
            background-image: url(../img/首页图库/download.png);
            background-position: 0 -290px;
        }

        .download-app p {
            margin: 10px 0px;
            color: #8d8d8d;
            text-align: center;
            font-size: 12px;
        }

---

总结

      以上就是今天所要分享的内容，依旧诚挚祝福屏幕前的你平安喜乐，健康幸福