CSS（十一）——定位练习（轮播图）

最新推荐文章于 2024-12-11 15:21:57 发布

原创最新推荐文章于 2024-12-11 15:21:57 发布 · 1k 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#定位 #css #css3 #前端

CSS3 专栏收录该内容

20 篇文章

订阅专栏

本文介绍了使用CSS实现轮播图的步骤，包括设置显示图片的元素、存储所有图片的容器、单个图片样式以及定位原理。通过设置定位属性如`position:absolute`和`left`实现图片切换效果。同时，提到了动态效果需借助CSS3或JavaScript。文章还提供了完整的HTML和CSS代码示例，帮助读者理解轮播图的核心逻辑。

CSS（十一）——定位练习（轮播图）

前言

阅读本篇笔记之前要注意一个问题，轮播图的设置仍然需要CSS3或JavaScript来协助完成图片滚动的效果。现在一直以来做的都是静态页面，动态效果后期会加入其中。

本次记录的内容基于前面的笔记为基础，所以在此次后除非出现新的比较重要的属性或者引入了新的技术，否则在实践方面的笔记中将会主要记录逻辑。

概述

轮播图的主要逻辑其实与二级菜单或者弹出层的逻辑一样，有些元素在页面中是隐藏的，需要执行特定操作才会显示出来。所以具体的逻辑不做赘述。

那么轮播图需要注意的是，在图片的元素设置中依旧需要注意定位的问题。

在轮播图中，我们首先需要做的是设置一个放图片的空间，具体代码如下：

<div class="banner">
        <div class="imgs">
            <a href=""><img src="./imgs/1.jpg" alt=""></a>
            <a href=""><img src="./imgs/2.jpg" alt=""></a>
            <a href=""><img src="./imgs/3.jpg" alt=""></a>
        </div>
</div>

首先，需要一个banner来做轮播图的最外层边框；
其次，对需要轮播的图片设置一个总体的元素空间；
【注】：需要注意的是，banner和imgs元素中要根据该轮播图在页面中所占空间的大小来设置；
最后，在imgs中设置多个需要轮播的图片，每个图片的尺寸（宽高）要遵循外层区域的相关尺寸。
只在页面显示一张图片，所有尺寸都是为了显示一张图片来设置的

接下来根据上面的说明来对元素的属性进行设置，具体样式如下：

.banner{
    width:250px;
    height: 350px;
    border: 1px solid;
    margin: 1em auto;
    overflow: hidden;
    position: relative;
}
.banner>.imgs img{
    width: 250px;
    height: 350px;
}
.banner>.imgs{
    width: 750px;
    height: 350px;
}
.banner>.imgs>a{
    float: left;
}

需要注意的是，在banner中的imgs（就是包含所有图片的元素，他的宽度是所有图片宽度的总和，这样所有图片就都可以存放在imgs中，同时因为banner的宽度只有一张图片的数值，所以其余图片相当于没有空间）
至于为什么包含图片的a元素没有出现高度坍塌，因为在banner和imgs中，我们已经将高度定死。

做到这里后，我们可以看到页面中显示了一张图片，这个时候你们可以将imgs中的定位设定为负数。可以看到切换了图片。

其余的各种样式懒得说，都是之前做过的样式，所以代码所有的代码贴在下面，最后会在总结中解释核心逻辑。

具体代码

<!--html代码-->
<div class="banner">
        <div class="imgs">
            <a href=""><img src="./imgs/1.jpg" alt=""></a>
            <a href=""><img src="./imgs/2.jpg" alt=""></a>
            <a href=""><img src="./imgs/3.jpg" alt=""></a>
        </div>
        <div class="left">&lt;</div>
        <div class="right">&gt;</div>
        <div class="modal">
            <div class="title">
                sad绝代风华拉水电
            </div>
            <div class="dots">
                <ul>
                    <li></li>
                    <li></li>
                    <li></li>
                </ul>
            </div>
        </div>
        
</div>

<!--css代码-->
.banner{
    width:250px;
    height: 350px;
    border: 1px solid;
    margin: 1em auto;
    overflow: hidden;
    position: relative;
    box-sizing: border-box;
}

.banner>.imgs{
    width: 750px;
    height: 350px;
    box-sizing: border-box;
    position:absolute;
    left: -250px;
}

.banner>.imgs img{
    width: 250px;
    height: 350px;
    box-sizing: border-box;
    
}

.banner>.imgs>a{
    float: left;
}

.banner>.left,.banner>.right{
    position: absolute;
    width: 50px;
    height: 50px;
    background-color: #fff;
    font-size: 3em;
    font-family: Arial, Helvetica, sans-serif;
    border-radius: 50%;
    background-color: rgba(255,255,255,0);
    color: rgba(255,255,255,0);
    cursor: pointer;
}
.banner>.left{
    left: 10px;
    top: 0;
    bottom: 0;
    margin: auto;
    text-align: center;
    line-height: 50px;
}

.banner>.right{
    right: 10px;
    top: 0;
    bottom: 0;
    margin: auto;
    text-align: center;
    line-height: 50px;
}
.banner>.left:hover,.banner>.right:hover{
    background-color: rgba(255,255,255,.5);
    color:rgba(255, 0, 0, .4)
    
}

.banner>.modal{
    width: 100%;
    height: 40px;
    background-color: rgba(0,0,0,.5);
    position: absolute;
    left: 0;
    bottom: 0;
    line-height: 40px;
    box-sizing: border-box;
}

.banner>.modal>.title{
    float: left;
    padding-left:10px ;
    color: white;
    width: 100px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-weight: bold;
}

.banner>.modal>.dots{
    float: right;
    padding-right: 10px;
    width: 100px;
    color: white;
    line-height: 40px;
    text-align: right;
}

.banner>.modal>.dots>ul>li{
    width: 6px;
    height: 6px;
    background-color: #ccc;
    display: inline-block;
    margin: 0 2px;
    border-radius: 50%;
    cursor: pointer;
}

.banner>.modal>.dots>ul>li:hover{
    background-color: #369;
}