图片轮播的盒子模型
做考核任务查了下做图片轮播的资料，大概的思路是先做一个相框，然后做一个长的盒子，在盒子里面放上一排图片，通过控制盒子的位置变化来实现轮播效果。
看起来好像挺简单的，但是实际操作起来发现只是一个简单的盒子模型就遇到了几次坑
<div class="page"> // 外层相框 <div class="box"> // 装轮播图的盒子 <div class="imgbox"><img src="01.jpg" alt=""></div> // 装图片的盒子 <div class="imgbox"><img src="02.jpg" alt=""></div> // 装图片的盒子 <div class="imgbox"><img src="03.jpg" alt=""></div> // 装图片的盒子 <div class="imgbox"><img src="04.jpg" alt=""></div> // 装图片的盒子 <div class="imgbox"><img src="05.jpg" alt=""></div> // 装图片的盒子 </div> </div>
首先把所以的margin和padding清零
* {
margin: 0px;
padding: 0px;
}
相框page通过position: relative;固定位置，通过overflow: hidden;设置内容溢出隐藏
.page{
position: relative;
overflow: hidden;
}
装轮播图的盒子box设置好宽度=所以轮播图的总宽度，高度设置为自动。这里为了让图片可以跟随浏览器大小改变宽度，所以设置为百分比宽度。
.box{
width: 500%;
height: auto;
}
装图片的盒子imgbox要显示在同一排中需要设置display: inline;
.imgbox{
display: inline;
}
图片img的格式需要设置为box宽度的五分之一
注意这里我遇到了第一个坑，这里一定要设置下背景图片的尺寸属性background-size:contain;或者background-size:cover;否则图片会显示不完整。
.box img{
background-size:contain;
width: 20%;
height: auto;
}
到这里设置完了盒子的css样式，运行之后发现只有4张图片在第一行，有一张图片出现在第二行
我明明所有的边框都清零了，但是盒子中间还是有空隙。后经过查资料发现这里还有一个坑，就是div块之间的空格会占用空间导致盒子之间出现空隙，这里需要把box的样式添加一条font-size: 0px;这样div块之间的空格就不会占用空间了。修改下box的样式
.box{
width: 1000%;
height: auto;
font-size: 0px;
}
这样就可以把五张图全部显示到一行里了（其实也可以把box的宽度设置的足够长就可以保证所有图片显示在第一行了）
到这里盒子基本上就做好了
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0px;
padding: 0px;
}
.page{
position: relative;
overflow: hidden;
z-index: 1;
}
.box{
width: 1000%;
height: auto;
font-size: 0px;
z-index: 1;
}
.imgbox{
display: inline;
}
.box img{
background-size:contain;
width: 10%;
height: auto;
}
</style>
</head>
<body>
<div>
<div style="transition-duration: 0ms; transform: translate3d(0px, 0px, 0px);">
<div><img src="https://res.devcloud.huaweicloud.com/obsdevui/diploma/8.1.17.002/banner-5.0e9bb68d425a4a5c3b18.jpg" alt=""></div>
<div><img src="https://res.devcloud.huaweicloud.com/obsdevui/diploma/8.1.17.002/banner-5.0e9bb68d425a4a5c3b18.jpg" alt=""></div>
<div><img src="https://res.devcloud.huaweicloud.com/obsdevui/diploma/8.1.17.002/banner-5.0e9bb68d425a4a5c3b18.jpg" alt=""></div>
<div><img src="https://res.devcloud.huaweicloud.com/obsdevui/diploma/8.1.17.002/banner-5.0e9bb68d425a4a5c3b18.jpg" alt=""></div>
<div><img src="https://res.devcloud.huaweicloud.com/obsdevui/diploma/8.1.17.002/banner-5.0e9bb68d425a4a5c3b18.jpg" alt=""></div>
<div><img src="https://res.devcloud.huaweicloud.com/obsdevui/diploma/8.1.17.002/banner-5.0e9bb68d425a4a5c3b18.jpg" alt=""></div>
<div><img src="https://res.devcloud.huaweicloud.com/obsdevui/diploma/8.1.17.002/banner-5.0e9bb68d425a4a5c3b18.jpg" alt=""></div>
<div><img src="https://res.devcloud.huaweicloud.com/obsdevui/diploma/8.1.17.002/banner-5.0e9bb68d425a4a5c3b18.jpg" alt=""></div>
<div><img src="https://res.devcloud.huaweicloud.com/obsdevui/diploma/8.1.17.002/banner-5.0e9bb68d425a4a5c3b18.jpg" alt=""></div>
<div><img src="https://res.devcloud.huaweicloud.com/obsdevui/diploma/8.1.17.002/banner-5.0e9bb68d425a4a5c3b18.jpg" alt=""></div>
</div>
</div>
</body>
</html>
再给box加上一个css 3D转换样式style="transition-duration: 0ms; transform: translate3d(0px, 0px, 0px);这样只要控制通过改变translate3d(0px, 0px, 0px)这里的X轴坐标就可以实现一个简单的图片轮播了。这篇博客仅讨论盒子模型问题，具体的JS怎么控制实现轮播和其他的一些细节问题这里就不做讨论了。
只是一个简单的盒子做的过程中就遇到了很多问题，很多知识点学的时候觉得明白了。但是真到了用的时候，要把学会的知识点组合起来实现具体的功能就会发现不知道从哪里下手，遇到各种各样的问题。归根结底还是缺少经验，学习的时候还是要多找些自己能力范围之内的小项目动手多练习实现具体的功能，把学到的知识组合起来。
- 点赞
- 收藏
- 关注作者
评论（0）