轮播图的实现—JavaScript

靠技术吃饭

于 2021-11-12 11:05:33 发布

阅读量2.6k

点赞数 24

本文链接：https://blog.csdn.net/weixin_58131487/article/details/121163060

版权

今天又是一个非常实用的案例哟，听名字就觉得高级很难对吧，今天就来写一个案例，让你轻松学到轮播图的精髓！！

还是老规矩，来看一下实现效果！！

学习轮播图的首先是要把图片准备好，并且用 ul 的里面的 li 包起来，给 li 一个浮动，让他们显示在一行上，但是注意了，一定要给 ul 足够的宽哦！！

来吧，html 和 css 代码如下所示（文件名：index.html）

<!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>Document</title>
    <script src="animate.js"></script>
    <script src="轮播图.js"></script>
    <style>
        body {
            background-color: rgb(151, 147, 147);
        }

        * {
            margin: 0;
            padding: 0;
        }

        div {
            overflow: hidden;
            position: relative;
            width: 500px;
            height: 500px;
            background-color: skyblue;
            margin: 20px auto;
        }

        ul {
            list-style: none;
        }

        .img {
            width: 600%;
            position: absolute;
            left: 0;
        }

        li {
            float: left;
        }

        img {
            width: 500px;
            height: 500px;
        }

最低0.47元/天解锁文章

靠技术吃饭

关注

24
点赞
踩
19

收藏

觉得还不错? 一键收藏
34
评论
轮播图的实现—JavaScript

今天又是一个非常实用的案例哟，听名字就觉得高级很难对吧，今天就来写一个案例，让你轻松学到轮播图的精髓！！还是老规矩，来看一下实现效果！！学习轮播图的首先是要把图片准备好，并且用 ul 的里面的 li 包起来，给 li 一个浮动，让他们显示在一行上，但是注意了，一定要给 ul 足够的宽哦！！来吧，html 和 css 代码如下所示（文件名：index.html）<!DOCTYPE html><html lang="en"><head> .
复制链接

扫一扫

专栏目录