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;
}

总结

轮播图的核心逻辑主要为一下几点：

• 设置一个显示图片的元素，具体宽高和单个图片宽高一致；
• 设置一个存储所有图片的元素，宽为所有图片宽度的总和；
• 设置单个图片元素，与上述的两个元素的宽高做好兼容（就是自行设置）；
• 最后注意的是，显示图片的元素可以理解为画框，所有的图片以及后续加上的各种文字解释或者空间都要以画框的位置为基础做定位。

轮播图的静态样式具体就是这个样子，看过前几篇笔记的同学应该很轻松理解样式中的含义。