jquery优化轮播图2

继续优化
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>轮播图</title>
    <!-- <link rel="stylesheet" type="text/css" href="css/style.css"> -->
    <script type="text/javascript" src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
    <!-- <script type="text/javascript" src="js/lunbo.js"></script> -->
    <style type="text/css">
    *{
        margin: 0;
        padding: 0;
    }

    body {
        font-size: 14px;
        line-height: 1.5;
        font-family: 'Microsoft Yahei', 'arial', 'tahoma', 'simsun';
        color: #666;
        background-color: #fff
    }

    img {
        border: 0;
    }

    a {
        text-decoration: none;
        color: #666;
    }
    .public_scroll {
        position: relative;
        min-width: 1100px;
        max-width: 100%;
        height: 793px; overflow: hidden;

    }
    .public_s_list{ overflow: hidden;}

    .public_s_list a {
        position: absolute;  display: block;
        width: 100%;
    }

    .public_s_list a img {
        width: 100%;
        display: block;
       
    }
    .public_s_dot{ overflow: hidden; text-align: center; position: absolute; bottom:25px; z-index: 2; width: 100%; }
    .public_s_dot i{ width: 10px; height: 10px; background-color: #fff; margin:0 8px; display: inline-block; cursor: pointer; border-radius: 50%;}
    .public_s_dot .active{ background-color: #808080 }
    </style>
</head>

<body>
    <div class="public_scroll" id="publicScroll">
        <div class="public_s_list">
            <a href="javascript:;" class="J_pic"><img src="http://www.emoi.com/media/pc-cn/201810/1540853894181026841.jpg" alt="1"></a>
            <a href="javascript:;" class="J_pic"><img src="http://www.emoi.com/media/pc-cn/201805/1525203825936416255.jpg" alt="2"></a>
            <a href="javascript:;" class="J_pic"><img src="http://www.emoi.com/media/pc-cn/201712/1513641621162167882.jpg" alt="3"></a>
        </div>
        <div class="public_s_dot" id="publicDot"></div>
    </div>
    <script type="text/javascript">
    $(function() {
        var index = 0;
        var timer;
        //获取id为publicScroll 所有的img
        var imgList = $('#publicScroll .J_pic');
        //img的个数
        var imgNum = imgList.length;
        if(imgNum>1){
            //第一张图显示
            $('.J_pic').eq(0).show().siblings().hide();
            $('.J_pic').mouseover(function(){
                clearInterval(timer);  //鼠标经过停止自动播放
            });
            $('.J_pic').mouseout(function(){
                showTime(); //鼠标离开继续自动播放
            });
            // 填充分页
            var bPage=$('#publicDot');
            var html='';
            for(var i=0,max=imgNum;i<max;i++){
                html+=(i==0)?'<i class="active"></i>':'<i></i>';
            }
            bPage.append(html);
            // //鼠标点击分页
            bPage.children('i').on('click',function(){
                index=$(this).index();
                showBg();
            })
            function showBg() {
                $('.J_pic').eq(index).fadeIn(300).siblings().fadeOut(300);
                bPage.children('i').eq(index).addClass('active').siblings().removeClass('active');
            }
            function showTime() {
                timer = setInterval(function() {
                    index++;
                    if (index == imgNum) {
                        index = 0;
                    }
                    showBg();
                }, 4000);
            }
            //自动播放图片
            showTime();
        }
    });
    </script>
</body>

</html>