如何用jQuery写出一个优雅的轮播图

先上一个简单的轮播图给大家看看效果：

 

1、分析轮播图原理：1）五张轮播图的原理是使用6张图片作为轮播，方便最后一张和第一张接轨，给用户带来较好的体验效果

                                   2）当图片向左轮播时，图片的位置是向右移动的，同理当图片向右轮播时图片的位置是向左移动的

                                   3）当轮播到最后一张时我们需要快速切换到第一张,然后继续向右自动播放，向左同理（在第一张处图片位置为-num * moveLen，然后位置逐渐向右移动）

 

2、实现过程：点击事件、自动轮播事件、以及切换索引显示

      点击事件包括移入可视区后点击button显示，并且清除自动轮播的定时器，移出可视区后button消失，并且自动轮播，还有点击左右button的点击事件，以及点击下面小圆点的图片切换事件。

    自动轮播事件就是在无点击的情况下自动播放图片，默认向右轮播，运用move函数设置定时器播放。

    改变索引显示事件也是当显示当前图片便显示当前的索引点，并将其变红

 

3、实现

   1、HTML和CSS样式简单点

   body内的HTML如下：

<div class="wrapper">

<ul class="imgs">

<li><img src="./img/1.jpg" alt=""></li>

<li><img src="./img/2.jpg" alt=""></li>

<li><img src&