原生H5实现网易云轮播图

最新推荐文章于 2025-02-06 16:48:08 发布

OnMy22

最新推荐文章于 2025-02-06 16:48:08 发布

阅读量3.7k

点赞数 4

本文链接：https://blog.csdn.net/weixin_38654336/article/details/81270375

版权

本文介绍了如何使用原生HTML5来创建一个类似网易云音乐的轮播图，包括量取尺寸、图片裁剪以及实现轮播图的思路。作者建议使用PxCook量取尺寸，用Photoshop按比例裁剪图片，并提供了具体的裁剪步骤。最后，作者参考了一个教学视频来完成轮播图的实现。

摘要由CSDN通过智能技术生成

许久不更新了，今天做一个网易云的轮播图，就像下面这样

先二话不多说，贴上代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>网易云轮播图</title>
</head>
<style>
    body,ul{
        margin: 0;
    }
    ul{
        position: relative;
        padding-left: 0;
        width: 100%;
        height: 100%;
        overflow: hidden;
    }
    li{
        position: absolute;
        list-style: none;
        width: 730px;
        height: 336px;
        transition: 0.5s;
    }
    img{
        display: block;
    }
    .carousel{
        width: 1200px;
        height: 367px;
        margin: 80px auto;
    }
    .imgBox{
        width: 1200px;
        height: 336px;
    }
    .lineBar{
        width: 1200px;