仿网易云官网轮播图 html+css+js

最新推荐文章于 2022-07-22 21:38:23 发布

原创

最新推荐文章于 2022-07-22 21:38:23 发布 · 1w 阅读

216 ·

CC 4.0 BY-SA版权

文章标签：

#css #html #js #轮播图

本文介绍了一个仿网易云音乐轮播图的实现方案，利用HTML、CSS和JS技术实现图片自动轮播、手动切换及鼠标悬停暂停等功能。

效果：

在这里插入图片描述
可自动轮播，左右箭头按钮和下方小圆点可切图，鼠标移入时停止自动轮播。
视频演示：

【html+css+js】仿网易云轮播图

实现（后面有完整源码）：

1. 定义标签，看注释：

<!-- 底层盒子 -->
 <main id="main">
        <!-- 虚化的背景 -->
        <div class="bg"></div>
        <!-- 放图片底层盒子 -->
        <section>
            <!-- 放图片的盒子 -->
            <div class="tupian">
                <img src="img/images/1.jpg" class="image">
            </div>
            <!-- 放小圆点的盒子，里面的小圆点数量通过js动态添加 -->
            <div class="select">
                <!--  <div class="dian"></div>
                 <div class="dian check"></div>      -->          
            </div>
            <!-- 左右切换按钮 -->
            <div class="bt left"><span class="anniu"></span></div>
            <div class="bt right"><span class="anniu"></span></div>
        </section>
    </main>

2. 设置底层盒子和虚化背景的css样式：

   main{
   
   
        position: relative;
        top: 20vh;
        height: 300px;
        width: 100%;          
        overflow: hidden;
    }
    main .bg{
   
   
        position: absolute;
        top: -50%;
        left: -50%;
        width: 200%;
        height: 200%;
        background-image: url(img/images/1.jpg);
        background-size: 100% 100%;
        filter: blur(30px);
    }

position: relative; 相对定位
overflow: hidden; 溢出隐藏
position: absolute; 绝对定位
background-image: url(img/images/1.jpg); 背景图先设置轮播图的第一张
filter: blur(30px); 模糊效果，让背景虚化

3. 设置放图片的底层盒子的css：

 main section{
   
   
            position: relative;
            left: 50%;
            transform: translateX(-50%);
            height: 100%;
            width: 100%;
            max-width: 980px;       
        }

left: 50%;
transform: translateX(-50%); 居中。
max-width: 980px; 最大宽度只有980px；
4. 设置放图片的盒子与图片的css：

 main section .tupian{
   
   
            width: 100%;
            height: 100%;
        }
        main section .tupian .image{
   
   
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

object-fit: cover;保持图片原有尺寸比例。但部分内容可能被剪切。

5. 设置放小圆点的盒子与小圆点的css：

main .select{
   
   
            position: absolute;
            bottom: 10px;
            height: 30px;
            width: 100%;
            display: flex;
            justify-content: center;
            align-items: center;
        }
        main .select .dian{
   
   
            margin: 3px;
            width: 10px;
            height: 10px;
            border-radius: 50%;
            border: 2px solid rgb(255, 254, 254); 
           
        }
        main .select .dian:hover{
   
   
            background-color: rgb(255, 254, 254);
            cursor: pointer;
        }

display: flex;
justify-content: center;
align-items: center; flex布局，让子元素居中对齐。
margin: 3px; 外边距，让圆点间有间隔。
background-color: rgb(255, 254, 254); 白色；
cursor: pointer; 鼠标样式为小手。

6. 设置左右按钮的css：

main section .bt{
   
   
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            width: 50px;
            height: 50px;
            background-color: rgba(82, 81, 81, 0.2);
            border-radius: 20%;
            cursor: pointer;
            transition: all 0.3s;
        }
        main section .bt:hover{
   
   
            box-shadow: inset 0 0 1px rgba(255, 255, 255,.8),
            inset 0 0 5px rgba(255, 255, 255,.8),
            inset 0 0 15px rgba(255, 255, 255,.8);
        }
        main section .left{
   
   
            left: -60px;
        }
        main section .right{
   
   
            right: -60px;
        }

top: 50%;
transform: translateY(-50%); 垂直居中
transition: all 0.3s; 过渡效果
box-shadow: inset 0 0 1px rgba(255, 255, 255,.8) 阴影

7. 当设置屏幕过小时，左右按钮的位置要变化：

  /*当屏幕尺寸小于1100px时，应用下面的CSS样式*/
        @media screen and (max-width: 1100px)
        {
   
   
            main section .left{
   
   
            left: 20px;
        }
        main section .right{
   
   
            right: 20px;
        }
        }