HTML轮播图的制作【此处小编的代码部分并没有加入JavaScript部分】

最新推荐文章于 2023-04-12 14:31:51 发布

张小鱼༒

最新推荐文章于 2023-04-12 14:31:51 发布

阅读量1k

点赞数 1

分类专栏： HTML以及CSS和javascripts 文章标签： html css javascript

本文链接：https://blog.csdn.net/m0_56006701/article/details/124795341

版权

HTML以及CSS和javascripts 专栏收录该内容

8 篇文章 1 订阅

订阅专栏

在浏览一些网站的页面时，我们经常能看到图片不断播放的效果，在HTML当中就可以制作出来，由于小编目前还没有完全掌握JavaScript，做出来的效果可能没有轮播效果，这个小编会在以后将轮播效果的加入进去的。

制作轮播图页面时要注意：

1、图片时以内容的形式插入进去的，此处的图片不能作为背景使用，这个属于版面的内容，所以，一定要注意这一点，否则我们在后期制作大的页面时，会因为此处的问题，很难建立一个大的框架结构。

2、另外还有页面下面的小圆点，这个我们还是选择将其放在ul和li里面制作，小圆点可以用border-radius来制作。

3、可能在看京东或者淘宝页面时，会看到两边有一个翻页的效果，那个小编在这里没有做那个效果，有需要的可以去观摩一下京东或者淘宝的网页源代码，在哪里就可以看到制作这个效果的方式了。

<!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>
    <style type="text/css">
        *{
            padding: 0;
            margin: 0;
        }
        .father{
            position: relative;
            width: 730px;
            height: 458px;
            margin: 50px 15px;
        }
        .tpimg{
            position: absolute;
        }
        .roll{
            position: absolute;
            top: 426px;
            margin-left: 312px;
        }
        .tab {
            height:20px;
            width:20px;
            background:#3e3e3e;
            line-height:20px;
            text-align:center;
            font-size:10px;
            float:left;
            color:#ffffff;
            margin-right:10px;
            border-radius:100%;
        }
        .bg {
            background:#f27b05;
        }
    </style>
</head>
<body>
    <div class="father">
    <div class="one">
        <div class="tpimg"><img src="c:/img/focus.jpg" alt=""></div>
        <div class="tpimg"><img src="c:/img/focus.jpg" alt=""></div>
        <div class="tpimg"><img src="c:/img/focus.jpg" alt=""></div>
        <div class="tpimg"><img src="c:/img/focus.jpg" alt=""></div>
        <div class="tpimg"><img src="c:/img/focus.jpg" alt=""></div>
    </div>
    <div class="roll">
        <div class="tab bg">1</div>
        <div class="tab">2</div>
        <div class="tab">3</div>
        <div class="tab">4</div>
        <div class="tab">5</div>
    </div>
    </div>
</body>
</html>

下面是一个小编做的效果展示：