轮播图原理深入剖析
路飞写代码2019-04-17 21:28
大家好，我是路飞写代码，前端攻城狮，欢迎关注我，一起交流学习。
上一篇我们分享了网页滚屏特效原理剖析。那么本篇我们趁热打铁，继续分享一下轮播图的原理以及代码实现。
效果图：
轮播图效果原理剖析：
网页开发起始于布局，良好的布局，有助于我们高效的进行开发。所以合理的元素布局很重要。
先看一下原理图：
轮播图原理根据上面的原理图，我们进行页面元素的排版。
初步布局实现首先我们要保证后续的图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特效。希望能让您有所启发。我是路飞写代码，欢迎关注我，一起学习进步。
轮播图封面举报/反馈
0
0
收藏
分享
