忙忙碌碌了五六天总算是整出来了这个项目,老规矩先给大家看看我的效果图。
目录
效果图:
由于整个过程比较庞大,我就调几个重点来和大家讲一讲吧。
一、背景的固定
大家可以看见在我的移动滑轮时,背景图并没有改变,一直都是内容的改变,这一点其实很简单,也就是给插入背景图的容器一个固定定位(fixed)就行。
二、分页器(小点)形状的改变
由于我们一开始学习前端没多长时间,对于js和后面的知识并不了解多少,所以很多时候轮播图我们都是借助插件来制作的,那么可能就会有人疑惑如何改变分页器的形状呢,毕竟有的时候直接引入插件和想要达到的效果并不一样。
其实方法也很简单,在我们打开检查的时候就会发现有个类名为.swiper-pagination-bullet-active的部分一直都在改变,他就是我们要找的分页器,直接在css中选中类名进行改变即可。
.swiper-pagination .swiper-pagination-bullet-active {
width: 24px;
background: #b1968b;
border-radius: 5px;
}