banner轮播图实现

最新推荐文章于 2024-05-30 11:38:12 发布

Jacob的博客

最新推荐文章于 2024-05-30 11:38:12 发布

阅读量1.9k

点赞数 7

文章标签： javascript css 前端

本文链接：https://blog.csdn.net/Jacob_vue/article/details/126611480

版权

使用JavaScript实现轮播图

代码如下：

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>banner</title>
    <style>
        /* 设置初始 padding和margin*/
        
        * {
   
            margin: 0;
            padding: 0;
        }
        /* banner区域 */
        
        .banner {
   
            width: 100%;
            /* 溢出隐藏 */
            overflow: hidden;
            /* translateX中的百分数表示相对于它本身宽度的多少倍 */
            /* transform: translateX(-20%); */
            position: relative;
        }
        /* ul */
        
        .list {
   
            list-style: none;
            width: 500%;
            transition: transform .5s ease 0s;
        }
        
        .list li {
   
            float: left;
            width: 20%;
        }
        
        .list li img {
   
            width: 100%;
            /* height: 750px; */
            vertical-align: middle;
        }
        /* 按钮 */
        
        a {
   
            color: black;
            display: inline-block;
            text-decoration: none;
            width: 60px;
            height: 60px;
            line-height: 60px;
            top: 50%;
            margin-top: -30px;