js图片轮番自动切换…..

图片轮番自动切换，鼠标悬停方块那里停住，失去焦点又恢复自动切换，点一下可以切换到指定图片

大概写了个，有帮助麻烦点个采纳【本回答右上角】，谢谢~~


<!doctype html>
<meta charset="utf-8" />
<style>
    body {
        background: #333
    }

    .dots a {
        width: 45px;
        height: 45px;
        background: #666;
        display: block;
        margin-bottom: 5px;
        text-decoration: none;
        margin-left: 15px
    }

    .dots a.focus {
        background: #fc3
    }

    .slider div {
        background: #000;
        color: #fff;
        text-align: center;
        line-height: 30px
    }

    .slider img {
        width: 430px;
        height: 470px;
        display: block;
        border: 0
    }
</style>
<table align="center">
    <tr>
        <td class="slider">
            <div></div>
            <img />
            <div></div>
        </td>
        <td class="dots" valign="top">
            <a href="https://t7.baidu.com/it/u=2385494716,931161584&fm=193&f=GIF" title="图片一"></a>
            <a href="https://t7.baidu.com/it/u=2556336625,2995391728&fm=193&f=GIF" title="图片二"></a>
            <a href="https://t7.baidu.com/it/u=3541892791,1735760555&fm=193&f=GIF" title="图片三"></a>
            <a href="https://t7.baidu.com/it/u=1282096981,141440035&fm=193&f=GIF" title="图片四"></a>
        </td>
    </tr>
</table>
<script src="https://g.csdnimg.cn/??lib/jquery/1.12.4/jquery.min.js"></script>
<script>
    var timer, slider = $('.slider'), divs = slider.find('div'), img = slider.find('img'), cur = 0;
    function startTimer() {
        console.log('startTimer')
        timer = setInterval(function () {
            cur++;
            if (cur >= as.length) cur = 0;
     
            as.eq(cur).trigger('click')


        }, 4000);//4秒切换一次，其他时间改这里
    }
    var as = $('.dots a').mouseenter(function () {
        clearInterval(timer)
        console.log('clearInterval')}).mouseleave(startTimer).click(function () {
        img.attr('src', this.href);
        var el = $(this);
        el.siblings().removeClass('focus');
        cur = el.addClass('focus').index();
        divs.eq(0).html(cur + 1 + '/' + as.length);
        divs.eq(1).html(el.attr('title'));
        return false;
    });
    as.eq(cur).trigger('click');
    startTimer();
</script>

img