使用jQuery完成无缝轮播图案例

前言：

         一.前面给大家讲了关于css的一些有趣的小案例，这一期来给大家介绍下jQuery，jQuery的使用相比较js的使用比较简单，因为jQuery会自动给你生成循环函数，使代码简洁，相比较js实现轮播图，代码量较少。接下来给大家看下利用jQuery实现自动轮播图的案例吧。

效果如下：

 

  1. 首先搭建结构

      插入事先准备好的五张图片，span标签为下标小圆点，设置点击切换箭头，a标签为为空链接，因为a标签是链接标签，移入会有手型。

 <div class="wrapper">
        <div class="contain">
            <img src="./img/01.jpg" alt="">
            <img src="./img/02.jpg" alt="">
            <img src="./img/03.jpg" alt="">
            <img src="./img/04.jpg" alt="">
            <img src="./img/05.jpg" alt="">
        </div>
        <div class="btn">
            <span class="active"></span>
            <span></span>
            <span></span>
            <span></span>
            <span></span>
        </div>
        <a href="#">&lt;</a>
        <a href="#">&gt;</a>
    </div>

   2. 设置css样式

      清除原有样式，遵从子绝父相原则，给wrapper设置相对定位，让五张图片叠加在一块，把span设置为块级元素，边框圆角设置为50%，给小圆点设置鼠标移入手型，设置左右箭头样式。

      *{
            margin: 0;
            padding: 0;
        }
        .wrapper {
            width: