jQuery-动画效果（轮播图案例）

今天我和大家分享一下轮播图的实现，下面是我做的轮播图效果案例，如下图所示：

 首先我们看到，它是由背景图片、方向图标和指示器组成。我们发现背景图片、方向图标和指示器是层叠在一起的，所以布局时我们要用绝对定位。我们要实现点击方向图标时，图片跟着变换；点击指示器时，图片跟着变换；不点击时每隔5秒自动播放；不点击时不显示方向图标。

一，先写HTML布局代码

结构布局：一个大的div，里面包含一个Img图片标签，显示背景图片部分，还有一个div，显示方向图标部分。

二，再写CSS样式代码

样式代码：大家可以自己设计自己喜欢的颜色和样式。注意要用绝对定位就要遵循子绝父相的原则。想让界面只显示一张图片可以用overflow: hidden;把超出部分隐藏，在用定位后可以设置top:

50%;transform: translateY(-50%);垂直居中 display: none;

三，最后写jQuery代码来实现效果图

注意开始先把图片隐藏，默认显示第一张图，不然不管你最先点击什么图片，它都是第二张图。显示下一张图片时，上一张图片和指示器的标记要清除

 最后可以自动播放图片也可以手动播放图片，以达到自己想要的效果图。