前端组件之轮播图

前端组件之轮播图

继续更新组件的文章,今天来说说轮播图组件。相信这个组件应该在各大网站都能经常见到，大家面试的时候可能也会被问到轮播图的原理和实现。
所以，下面来说说说我自己实现的时候的一些心得!~

上面图这个就是京东的一个轮播图.我们就模仿类似的做一个轮播图。

原理

将图片在一行中平铺，然后计算偏移量再利用定时器实现定时轮播。

需求分析

功能分析

要实现这个效果，首先需要分析一下。轮播图最重要就是图片通过轮播实现图片展示。对应功能有向左和向右翻页，那么就需要两个按钮来实现。
在容器底部还应该有一行圆点，显示当前有多少图片和图片现在所处位置。那么我们又需要一排圆点按钮来实现。

样式分析

需要做的样式首先对于按钮我们需要进行一些控制,并且鼠标移到对应地方有交互效果。然后要控制容器的大小和图片容器大小。

用原生js做轮播图

步骤一：结构设计

html代码清单

<div class="container">
			<div class="wraper" style="left: 0;">
				<img src="img/a.jpg" >
				<img src="img/b.jpg" >
				<img src="img/c.jpg" >
				<img src="img/d.jpg" >
				<img src="img/05.jpg" >
			</div>
			<div class="button">
				<span class="btn-num on"></span>
				<span class="btn-num"></span>
				<span class="btn-num"></span>
				<span class="btn-num"></span>
				<span class="btn-num"></span>
				
			</div>
				<a href="javascript:;" class="arrow arrow_left">&lt;</a>
				<a href="javascript:;" class="arrow arrow_right">&gt;</a>
		</div>

这部分直接贴代码,不用过多介绍,图片直接网上搜了几张图片尺寸一样的

步骤二：样式设计

首先就是要对一些默认的样式进行改变控制,然后就是对最外层的容器设置了。我们要把图片限制在最外层容器中移动，那么先把最外层容器container
设置为position：relative，固定容器的宽高，对于超出部分进行隐藏处理。然后对包裹图片的容器设置为绝对定位，相对于外层容器移动。这里注意~
包裹的容器wraper其宽度应该是所有图片宽度的总和，控制一行，这样才能装载到全部图片，并且设置其为最底的一层即z-index=1。方面顶上的箭头和圆点的放置。再者就是对图片进行浮动和大小控制了。
那么设计完就有了一定效果。

设置好最基础的外层，就来完成一下圆点和箭头。因为这里箭头用转义字符串，所以可以当做字体处理。那么只要把其设置为z-index=2即在图片上了,同理圆点也是如此.
我们还希望,给一个高亮的样式来提示图片当前的位置。所以最终设置好，就有了默认的效果了。