CSS 实现轮播图的导航点

╰+攻爆jí腚メ 2022-12-26 00:54 82阅读 0赞

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>轮播图的导航点</title>
    </head>
    <style> .banner { position: relative; } .dots { background-color: gray; position: absolute; height: 48px; bottom: 4px; } .dot { display: block; float: left; width: 48px; height: 48px; position: relative; } .dot:hover::before { content: ''; display: block; background-color: #fff; width: 48px; height: 48px; border-radius: 50%; opacity: .2; } .dot::after { content: ''; display: block; width: 20px; height: 20px; border: 6px solid #fff; position: absolute; top: 8px; left: 8px; border-radius: 50%; opacity: .4; } .dot:hover::after { opacity: 1; background-color: #fff; } </style>
    <body>
    <div class="banner">
        <img src="../img/1.jpg" alt="">
        <div class="dots">
            <i class="dot active"></i>
            <i class="dot"></i>
            <i class="dot"></i>
            <i class="dot"></i>
            <i class="dot"></i>
            <i class="dot"></i>
            <i class="dot"></i>
            <i class="dot"></i>
        </div>
    </div>
    </body>
    </html>

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hzbDA1MzBoc2w_size_16_color_FFFFFF_t_70]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hzbDA1MzBoc2w_size_16_color_FFFFFF_t_70]: /images/20221120/6c1667487b524593a53ed8bbab1c18eb.png

发表评论取消回复

表情：

评论列表（有 0 条评论，82人围观）

还没有评论，来说两句吧...

相关阅读

相关 HTML/CSS 锚点轮播图

HTML/CSS 锚点轮播图方法一： <!DOCTYPE html> <html lang="en"> <head>

爱被打了一巴掌/ 2023年01月01日 15:51/ 0 赞/ 190 阅读

相关 CSS 实现轮播图的导航点

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8">

╰+攻爆jí腚メ/ 2022年12月26日 00:54/ 0 赞/ 83 阅读

相关 CSS实现简单的--轮播图

第一篇还是一点一点的写吧，之前只知道老师只讲了知识点，没有串起来做一个小东西，所以总感觉学的不行 ![watermark_type_ZmFuZ3poZW5naGVpdGk_

电玩女神/ 2022年12月08日 14:08/ 0 赞/ 122 阅读

相关 c语言实现图片轮播,纯css实现轮播图

轮播图的实现原理其实是比较简单的举个例子 main的宽度是100px div-main的宽度是500px 我们用js控制div-main往左或往右移动，这样就实现了轮

阳光穿透心脏的1/2处/ 2022年10月15日 05:53/ 0 赞/ 232 阅读

相关 html图片轮播思路,css3如何实现轮播图？css3实现轮播图片的方法

我们在网页上经常会看到有一块位置会有很多的图片来回切换，这就是轮播图，轮播图的出现，让重要的信息可以在一个位置显现，那么，轮播图是如何实现的呢？轮播图的实现用js或者css都可

妖狐艹你老母/ 2022年10月12日 05:41/ 0 赞/ 306 阅读

相关轮播图实现html,html、css、js实现轮播图

2017-03-13 今天把轮播图的知识1过了一下，写了一个比较简单的轮播图，给大家参考一下。查看具体的效果点击这个链接： http://gjhnstxu.me/%E8

落日映苍穹つ/ 2022年10月10日 09:46/ 0 赞/ 294 阅读

相关 html点击小图轮播图,使用纯CSS实现点击轮播图效果，无js。

使用纯CSS实现图片轮播效果首先我们来看一下所实现轮播图的最终效果： ![03d7fc1b7850][] 轮播图效果接下来为html+css代码部分：以下为H

r囧r小猫/ 2022年10月07日 08:52/ 0 赞/ 388 阅读

相关纯css实现轮播图

轮播图的实现原理其实是比较简单的举个例子 <div class="main"> <div class="div-main"></div>

左手的ㄟ右手/ 2022年07月11日 15:22/ 0 赞/ 205 阅读

相关 HTML/CSS/JS实现二级菜单导航+轮播图

学习了HTML、CSS和JavaScript后，总得做点东西练练手，于是干脆跟着效果做了个类似于慕课网的轮播效果，配上一个二级菜单导航，具体效果如下： ![这里写图片描述]

痛定思痛。/ 2022年05月31日 02:57/ 0 赞/ 507 阅读

相关手动轮播图（纯css实现）

> 在一些app上，我们经常能见到一些向左滑向右滑显示更多图片的样式，今天与大家分享一下这种手动轮播图的制作方法，只需要css就好。核心思想：利用超出部分滚动原理，在固定的

淡淡的烟草味﹌/ 2022年01月17日 02:47/ 0 赞/ 519 阅读