前端开发笔记5

最新推荐文章于 2024-10-08 13:23:16 发布

有一天我能赚钱

最新推荐文章于 2024-10-08 13:23:16 发布

阅读量191

点赞数 2

本文链接：https://blog.csdn.net/zxx20180907/article/details/89884904

版权

在学习前端的时候，需要对html，css，js单独专项训练，这样才能夯实基础，把各种功能吃得透透的
下面是使用借助js，用纯html，css来完成一个轮播图，图的位置大小按需设置。



<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #container {
            margin: auto;
            width: 1200px;
            height: 300px;
            overflow: hidden;
        }

        #photo {
            width: 3600px;
            animation: switch 7s ease-out infinite;
        }

        #photo > img {
            float: left;
            width: 1200px;
            height: 300px;
        }

        @keyframes switch {
            0%, 25% {
                margin-left: 0px;
            }
            35%, 60% {
                margin-left: -1200px;
            }
            70%, 100% {
                margin-left: -2400px;
            }
        }

    </style>
</head>
<body>
<div id="container">
    <div id="photo">
        <img src="http://www.ynu.edu.cn/images/2019ynqrwr.jpg" />
        <img src="http://www.ynu.edu.cn/images/6U4A9986-2.jpg" />
        <img src="http://www.ynu.edu.cn/images/szjjyjy-3.jpg" />
    </div>
</div>
</body>
</html>