使用HTML+CSS实现轮播图

最新推荐文章于 2024-03-18 23:11:45 发布

damo01

最新推荐文章于 2024-03-18 23:11:45 发布

阅读量4.5w

点赞数 23

分类专栏：前端文章标签： HTML CSS 轮播图

本文链接：https://blog.csdn.net/damo01/article/details/95581807

版权

前端专栏收录该内容

2 篇文章 1 订阅

订阅专栏

轮播图的实现

使用CSS控制轮播图

无自动轮转，只能通过悬浮标签来改变。

准备材料，一个div用来盛放所有参与轮播的图片、n个用来控制悬浮的小div、n-1个放好图片的img。
将div相对定位但是不设置偏移量（为下边的绝对定位提供定位点）,然后通过绝对定位将小div固定在大div中合适的位置（由于相对定位进行偏移量时，会造成原本的位置被占用，所以不使用相对定位来对小div定位。）。然后将img都进行绝对定位不设置偏移量（我理解为将这些照片从底层升起来，然后就能重叠放了）。
设置小div的hover通过通用兄弟选择器将img的z-index的值增加。达到显示的效果。注意，要提前将小div的z-index先升高点(比img将要升高的多)，要不然当悬浮到小div时，img的z-index增加会造成小div的消失。带来不便

效果图：

一：鼠标不对1、2、3悬浮。默认的出现第一张照片。且1、2、3的透明度为0.5。

二：悬浮 3 图片更换且将3的透明度更改

其他的图片修改类似

源码：

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>轮播图</title>
    </head>
    <style type="text/css">
        *{
            margin: 0;
            padding: 0;
        }
        .div1{
            width: 500px;
            height: 500px;
            border: 1px solid red;
            margin: 0 auto;
            position: relative;
        }
        .div01{
            width: 20px;
            height: 20px;
            box-sizing: border-box;
            opacity:0.5;
            line-height: 20px;
            text-align: center;
            border-radius: 20px;
            background-color: white;
            z-index: 10;
        }
        #div2{
            position:absolute;
            right: 70px;
            bottom: 10px;
        }
        #div3{
            position:absolute;
            right: 40px;
            bottom: 10px;
        }
        #div4 {
            position: absolute;
            right: 10px;
            bottom: 10px;
        }
        #div2:hover ~ #img1{
            z-index: 2;
        }
        #div2:hover{
            opacity:1;
        }
        #div3:hover ~ #img2{
            z-index: 2;
        }
        #div3:hover{
            opacity:1;
        }
        #div4:hover ~ #img3{
            z-index: 2;
        }
        #div4:hover{
            opacity:1;
        }
        .img01{
            position:absolute;
        }
        img{
            width: 500px;
            height: 500px;
        }
    </style>
    <body>
        <div class="div1">
            <div id="div2" class="div01">1</div>
            <div id="div3" class="div01">2</div>
            <div id="div4" class="div01">3</div>
            <img id="img1" class="img01" src="img/jd01.jpg">
            <img id="img2" class="img01" src="img/jd02.jpg">
            <img id="img3" class="img01" src="img/jd03.jpg">
            <img id="img4" class="img01" src="img/jd04.jpg">
        </div>
    </body>
</html>

难点1：如何将照片叠加在一块。

解决方法：所有的照片都放在div中会造成div放不下，内容撑出来。所以要将图片都提高一个层，像定位、浮动都能够使标签脱离标准文本流，我们把标准文本流看作为第0层，那么浮动就会使标签抬升成为第一层。所以我们使用绝对定位将img标签抬升，抬升会造成覆盖，就是最后抬升的会遮住前边抬升的。（在绝对定位前，先给父级相对定位一下，因为绝对定位规则是：当父级有定位就按照父级的定位走，如果父级没有定位。就在向上找父级，实在没有，最后以窗体左上角为原点。）

难点2：如何设置悬浮div，实现更改img的CSS样式。

解决方法：将div设置为img的兄弟标签且是在img标签前的兄弟节点。因为使用伪类兄弟选择器时，只能调用当前标签后边的兄弟标签。代码：#div3:hover ~ #img2 的原理就是，这个#div3:hover是id为#div3的标签当鼠标悬浮时发生。这个~ #img2是伪类的通用兄弟选择器，选择之后的兄弟为img2的标签。总体意思是，#div3:hover这个触发后就会选择 ~ #img2通过通配兄弟的方法找img2。注意:兄弟选择器，只能选择自己后边的标签。

damo01

关注

23
点赞
踩
182

收藏

觉得还不错? 一键收藏
9
评论
使用HTML+CSS实现轮播图

轮播图的实现使用CSS控制轮播图无自动轮转，只能通过悬浮标签来改变。准备材料，一个div用来盛放所有参与轮播的图片、n个用来控制悬浮的小div、n-1个放好图片的img。将div相对定位但是不设置偏移量（为下边的绝对定位提供定位点）,然后通过绝对定位将小div固定在大div中合适的位置（由于相对定位进行偏移量时，会造成原本的位置被占用，所以不使用相对定位来对小div定位。）。...
复制链接

扫一扫