大家好,我是路飞写代码,前端攻城狮,欢迎关注我,一起交流学习。
上一篇我们分享了网页滚屏特效原理剖析。那么本篇我们趁热打铁,继续分享一下轮播图的原理以及代码实现。
效果图:
轮播图效果
原理剖析:
网页开发起始于布局,良好的布局,有助于我们高效的进行开发。所以合理的元素布局很重要。
先看一下原理图:
轮播图原理
根据上面的原理图,我们进行页面元素的排版。
初步布局实现
首先我们要保证后续的图1、图2、图3都需要撑满整个容器,那么就需要视图容器撑满,我么可以用position:relative属性,设置width:100%;height:100%;
视图容器CSS
然后我们需要设置子元素布局,保证子元素都是display:inline-block;当然div设置成这个属性,水平排列会有间隙,我们的处理就是在父元素上设置font-size:0;消除间隙,然后在子元素上在恢复font-size属性,设置font-size:initial;
子元素布局CSS
现在我们的布局效果就出来了,我们看一下:
布局效果初步
可以看到子元素全部显示出来。此时我们需要在视图容器中设置overflow:hidden;属性,超出隐藏。然后添加两个按钮,这个比较简单,我们直接上图。
添加按钮效果
然后我们从网上找几个美图,并且美化一下CSS。jQuery实现移动元素
上面我们的布局已经完成了,下一步就是我们需要来进行对元素移动实现动态滚动。这一块就是jQuery的animate去更改left属性即可。不在赘述,直接上代码截图。
轮播图JS
结束语
今天的分享就到这儿了,只是简单的实现了一下轮播图,其实还可以加入更多的css3特效。希望能让您有所启发。我是路飞写代码,欢迎关注我,一起学习进步。
轮播图封面
举报/反馈

路飞写代码

44万获赞 1.3万粉丝
如若人间无正义,蝼蚁亦当化修罗
科技领域爱好者
关注
0
0
收藏
分享