transform 轮播图写法

最新推荐文章于 2022-08-28 14:16:57 发布

板男根颗粒

最新推荐文章于 2022-08-28 14:16:57 发布

阅读量2.6k

点赞数 1

分类专栏： JS 轮播图 transform JS原生写法轮播

本文链接：https://blog.csdn.net/u014632637/article/details/81634240

版权

本文介绍了一种使用CSS transform属性创建的轮播图实现方法，该方法允许图片宽度和高度任意，并且可以自由设定轮播速度，提供了良好的灵活性。

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

图片宽度任意，高度任意，轮播速度任意设置。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<style type="text/css">
* {
    margin: 0;
    padding: 0;
    text-decoration: none;
    color: #333;
}

#container {
    width: 720px;
    height: 500px;
    overflow: hidden;
    position: relative;
}

#list {
    overflow: hidden;
    position: absolute;
}

#list a {
    overflow: hidden;
    display: block;
    float: left;
}

#list img {
    width: 720px;
    height: 500px;
    float: left;
}

#spanlist {
    position: absolute;
    z-index: 999;
    bottom: 15px;
    left: 50%;
    padding: 5px 10px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 10px;
}

#spanlist span:last-child{
    margin-right: 0px;
}
.span {
    width: 10px;

最低0.47元/天解锁文章

板男根颗粒

关注

1
点赞
踩
6

收藏

觉得还不错? 一键收藏
0
评论
transform 轮播图写法

图片宽度任意，高度任意，轮播速度任意设置。&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;Document&lt;/title&gt;&lt;/head&gt;&lt;s
复制链接

扫一扫

专栏目录