CSS——网易云音乐首页之轮播图的实现（完整版）

文章目录

• 前言
• 一、结构的分析
• 二、使用步骤
  • 1.HTML结构
  • 2.CSS样式
• 总结

---

前言

       本文主要介绍的是网易云音乐首页之轮播图的实现，细心的小伙伴会发现，之前有发过网易轮播图的制作方法，但并没有完全实现，终于，本人“重操旧业”实现了原有的效果。

        这里也有涉及swiper插件的使用，关于使用方法在以往的文章有过介绍，不了解的同学欢迎翻阅~

---

一、结构的分析

效果图：

     

结构分析

• 首先，我们可以把结构划分为里外两个部分，外面的图片应该是整个图片的宽度，清晰的图片相对于外面的容器居中，也就是说在这里应该有两张图片，外面的是一个模糊的图片，里面是一个清晰的图片
• 其次，当轮播图滚动时应该是整张图在轮播

那么如何做到整张图片的轮播呢，今天，我拿出以往的练习项目优化！灵机一动把它做出来了！！！这不，刚完成就拿来给大家分享了~其实啊，很简单，不信你往下看~

二、使用步骤

1.HTML结构

代码如下（示例）：

   <!-- 轮播图区域 -->
        <div class="outer">
                <div class="swiper">
                    <div class="swiper-wrapper">
                        <div class="swiper-slide">
                            <div class="image-inner">
                                <img src="../img/首页图库/banner1.jpg" alt="">
                            </div>
                            <div class="image-outer">
                                <img src="../img/首页图库/background-image1.jpg" alt="">
                            </div>
                        </div>
                        <div class="swiper-slide">
                            <div class="image-inner">
                                <img src="../img/首页图库/banner2.jpg" alt="">
                            </div>
                            <div class="image-outer">
                                <img src="../img/首页图库/background-image2.jpg" alt="">
                            </div>
                        </div>
                        <div class="swiper-slide">
                            <div class="image-inner">
                                <img src="../img/首页图库/banner3.jpg" alt="">
                            </div>
                            <div class="image-outer">
                                <img src="../img/首页图库/background-image3.jpg" alt="">
                            </div>
                        </div>
                        <div class="swiper-slide">
                            <div class="image-inner">
                                <img src="../img/首页图库/banner4.jpg" alt="">
                            </div>
                            <div class="image-outer">
                                <img src="../img/首页图库/background-image4.jpg" alt="">
                            </div>
                        </div>
                        <div class="swiper-slide">
                            <div class="image-inner">
                                <img src="../img/首页图库/banner5.jpg" alt="">
                            </div>
                            <div class="image-outer">
                                <img src="../img/首页图库/background-image5.jpg" alt="">
                            </div>
                        </div>
                        <div class="swiper-slide">
                            <div class="image-inner">
                                <img src="../img/首页图库/banner6.jpg" alt="">
                            </div>
                            <div class="image-outer">
                                <img src="../img/首页图库/background-image6.jpg" alt="">
                            </div>
                        </div>
                        <div class="swiper-slide">
                            <div class="image-inner">
                                <img src="../img/首页图库/banner7.jpg" alt="">
                            </div>
                            <div class="image-outer">
                                <img src="../img/首页图库/background-image7.jpg" alt="">
                            </div>
                        </div>
                        <div class="swiper-slide">
                            <div class="image-inner">
                                <img src="../img/首页图库/banner8.jpg" alt="">
                            </div>
                            <div class="image-outer">
                                <img src="../img/首页图库/background-image8.jpg" alt="">
                            </div>
                        </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>

2.CSS样式

代码如下（示例）：

.outer {
    width: 100%;
    height: 285px;
}

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

.swiper-slide {
    position: relative;
    width: 100%;
    height: 285px;
}

.swiper-wrapper .image-outer>img {
    width: 100%;
    height: 285px;
}

.image-inner {
    width: 730px;
    height: 285px;
    position: absolute;
    left: 352px;
}

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

.prev {
    position: absolute;
    left: 290px;
    top: 50%;
    display: block;
    width: 37px;
    height: 63px;
    margin-top: -31px;
    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: -38px;
    width: 37px;
    height: 63px;
    right: 290px;
    background-image: url(../img/首页图库/首页轮播图.png);
    background-position: 0 -508px;
}

.next:hover {
    background-image: url(../img/首页图库/首页轮播图.png);
    background-position: 0 -578px;
}
.swiper-pagination{
    width: 730px;
    height: 20px;
    /* background-color: red; */
}
.download-app {
    position: absolute;
    top: 105px;
    left: 1084px;
    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;
}

---

总结

       好了，又到了说再见的时候了，这个轮播图的效果终于做出来了，今天的任务也按计划完成了，终于有些开心了。这篇文章如果能够帮助到你，那是我莫大的荣幸，最后到了停笔的时刻，依旧诚挚祝福看到这篇文章的你平安喜乐，健康幸福！