relative处理轮播图片隐藏切换

最新推荐文章于 2024-05-07 07:16:07 发布

坚定的守猴

最新推荐文章于 2024-05-07 07:16:07 发布

阅读量549

点赞数 1

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/weixin_44541267/article/details/86519227

本文介绍如何使用CSS的relative定位解决图片轮播时出现滚动条的问题，通过合理布局，实现平滑切换效果。

relative处理轮播图片隐藏切换
开发工具：Adobe Dreamweaver
关键技术：CSS样式定位
作者：黄鹏峰
撰写时间：2019年1月16日
我们都知道，实现图片完美切换的轮播效果，在定位方面起到的作用是不言而喻的。下面我就来分享一下这relative相对定位作用所产生的效果。
首先先看一个页面： 
![在这里插入图片描述](https://img-blog.csdnimg.cn/20190117101721457.PNG?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDU0MTI2Nw==,size_16,color_FFFFFF,t_70)
这是一个图片轮播的第一张图，在这里就简单的提一下这布局，图片轮播都有一个包含的概念在里面，也可以分为三种层次，外层大盒子装中层的盒子，中层盒子又装有里层图片切换的一个个小盒子（每张图片可当成一个小盒子）。切换效果的原理就是外层大盒子固定，中层盒子装着里层若干张图片，通过JS代码的轮播函数去控制里层盒子的图片移动，从而实现轮播切换的效果。

![在这里插入图片描述](https://img-blog.csdnimg.cn/20190117101738892.PNG?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDU0MTI2Nw==,size_16,color_FFFFFF,t_70)
外层盒子就类似一个屏幕展示，把里层盒子的图片按顺序一个个的展现出来，然而这就需要中层盒子有足够的空间把这些里层盒子给装起来（怎样设置盒子宽高一致的问题在这里就不详说了）。因为每张图片展示都有顺序的，那些还没展示的图片（相对于外层盒子超出的部分）就得隐藏起来了。
按常规的思维来想，直接加一句overflow:hidden;的代码就能够完美将超出部分给隐藏掉了。
![在这里插入图片描述](https://img-blog.csdnimg.cn/20190117101812101.PNG?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDU0MTI2Nw==,size_16,color_FFFFFF,t_70)

然而现实的效果却是......
![在这里插入图片描述](https://img-blog.csdnimg.cn/20190117101835190.jpg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDU0MTI2Nw==,size_16,color_FFFFFF,t_70)
看到图片下方的滚动条了没
再来一张
![在这里插入图片描述](https://img-blog.csdnimg.cn/20190117101844497.jpg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDU0MTI2Nw==,size_16,color_FFFFFF,t_70)
拖动了一下滚动条，以上面的那张图片相比，有没有发觉头部和两边有什么变化没（ps:这是同一项目的轮播啊）
这时该是“主角”登场了。在外层盒子加个relative(相对定位)

![在这里插入图片描述](https://img-blog.csdnimg.cn/20190117101920926.PNG?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDU0MTI2Nw==,size_16,color_FFFFFF,t_70)
刷新一下页面试试效果
![在这里插入图片描述](https://img-blog.csdnimg.cn/20190117102054403.PNG?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDU0MTI2Nw==,size_16,color_FFFFFF,t_70)
滚动条消失了
![在这里插入图片描述](https://img-blog.csdnimg.cn/20190117102125333.PNG?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDU0MTI2Nw==,size_16,color_FFFFFF,t_70)
应该出来的样式都出来了。
在此说一下这原理：顾名思义，relative(相对定位）就是外层盒子相对于中层的盒子定位，中层盒子就用absolute(绝对定位）固定其中，然后里面的图片一张张的切换，就像你拿一个框子透过它按顺序看放在桌子排列好的一张张图片这样，这种关系就有点类似物理上的运动与静止。