用jquery实现图片轮播

用jquery简单实现图片轮播效果，代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        * {
            margin: 0;
            padding: 0;
        }

        ul {
            list-style: none;
        }

        .slideShow {
             600px;
            height: 350px; /*其实就是图片的宽度和高度*/
            border: 1px #eeeeee solid;
            margin: 100px auto;
            position: relative;
            overflow: hidden; /*此处需要将溢出框架的图片部分隐藏*/
        }

        .slideShow ul {
             3000px;
            position: relative; /*此处需注意relative : 对象不可层叠，但将依据left，right，top，bottom等属性在正常文档流中偏移位置，如果没有这个属性，图片将不可左右移动*/
        }

        .slideShow ul li {
            float: left; /*让五张图片左浮动，形成并排的横着布局，方便点击按钮时的左移动*/
             600px;
        }

        .slideShow .showNav {
            position: absolute; /*用绝对定位给数字按钮进行布局*/
            right: 10px;
            bottom: 5px;
            text-align: center;
            font-size: 12px;
            line-height: 20px;
        }

        .slideShow .showNav span {
            cursor: pointer;
            display: block;
            float: left;
             20px;
            height: 20px;
            background: #ff5a28;
            margin-left: 2px;
            color: #fff;
        }

        .slideShow .showNav .active {
            background: #b63e1a;
        }
    </style>
</head>
<body>
<div class="slideShow">
    <ul>
        <li><a href="#"><img src="image/pic1.png" alt=""></a></li>
        <li><a href="#"><img src="image/pic2.png" alt=""></a></li>
        <li><a href="#"><img src="image/pic3.png" alt=""></a></li>
        <li><a href="#"><img src="image/pic4.png" alt=""></a></li>
        <li><a href="#"><img src="image/pic5.png" alt=""></a></li>
    </ul>
    <div class="showNav">
        <span class="active">1</span>
        <span>2</span>
        <span>3</span>
        <span>4</span>
        <span>5</span>
    </div>
    <script type="text/javascript" src="jquery-3.3.1.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            var slideShow = $(".slideShow"),    //获取最外层框架的名称
                ul = slideShow.find('ul'),
                showNumber = slideShow.find('.showNav span'),   //获取按钮
                oneWidth = slideShow.find('ul li').eq(0).width();   //获取每个图片的宽度
            var timer = null;   //定时器返回值，主要用于关闭定时器
            var iNow = 0;   //iNow为正在展示的图片索引值，当用户打开网页时首先显示第一张图，即索引值为0
            showNumber.on('click', function () {     //为每个按钮绑定一个点击事件
                $(this).addClass('active').siblings().removeClass('active');    //按钮点击时为这个按钮添加高亮状态，并且将其他按钮高亮状态去掉
                var index = $(this).index();    //获取哪个按钮被点击，也就是找到被点击按钮的索引值
                iNow = index;
                ul.animate({'left': -oneWidth * iNow,})   //注意此处用到left属性，所以ul的样式里面需要设置position: relative; 让ul左移N个图片大小的宽度，N根据被点击的按钮索引值iNOWx确定
            });

            function autoplay() {
                timer = setInterval(function () {   //打开定时器
                    iNow++; //让图片的索引值次序加1，这样就可以实现顺序轮播图片
                    if (iNow > showNumber.length - 1) {  //当到达最后一张图的时候，让iNow赋值为第一张图的索引值，轮播效果跳转到第一张图重新开始
                        iNow = 0;
                    }
                    showNumber.eq(iNow).trigger('click');   //模拟触发数字按钮的click
                }, 2000);    //2000为轮播的时间
            }

            autoplay();
            slideShow.hover(function () {
                clearInterval(timer);
            }, autoplay())
        })
    </script>
</div>
</body>
</html>
未完待续。。。