为什么我的mouseenter没有效果而且我把click事件注释后用键盘控制图片的切换时会跳过第一张

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <title>全屏的云南旅游相册</title>
    <link rel="stylesheet" href="css/style.css">
    <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
    <script src="js/script.js"></script>
</head>

<body>
    <span></span>
    <nav>
        <a href="#">泸沽湖</a>
        <a href="#">丽江古城</a>
        <a href="#">茶马古道</a>
        <a href="#">就这家·云逸客栈</a>
        <a href="#">西双版纳</a>
        <a href="#">云南红酒庄</a>
        <a href="#">轿子雪山</a>
        <a href="#">普者黑</a>
        <a href="#">海埂大坝</a>
        <a href="#">玉龙湾</a>
        <a href="#">昆明郊野公园</a>
        <a href="#">欧洲风琴小镇</a>
    </nav>
    <div>
        <img src="images/1.jpg">
        <img src="images/2.jpg">
        <img src="images/3.jpg">
        <img src="images/4.jpg">
        <img src="images/5.jpg">
        <img src="images/6.jpg">
        <img src="images/7.jpg">
        <img src="images/8.jpg">
        <img src="images/9.jpg">
        <img src="images/10.jpg">
        <img src="images/11.jpg">
        <img src="images/12.jpg">
    </div>
</body>

</html>

* {
    padding: 0;
    margin: 0;
    border: none;
}

html,
body {
    overflow: hidden;
    height: 100%;
    background: #93b3c6;
}

span {
    display: block;
    width: 16px;
    height: 16px;
    margin: 15px auto 20px;
    border-radius: 50%;
    background: #fff;
}

nav {
    position: relative;
    display: flex;
    width: 85vw;
    margin: 0 auto 30px;
    justify-content: space-between;
}

nav::before {
    position: absolute;
    top: 12px;
    width: 100%;
    height: 10px;
    background: #fff;
    display: block;
    content: '';
}

nav>a {
    position: relative;
    font-size: 10px;
    padding: 7px;
    border: 2px solid #5395b4;
    color: #255d7e;
    text-decoration: none;
    background: #fff;
}

div {
    position: relative;
    width: 85vw;
    height: 80vh;
    margin: 0 auto;
    background: #fff;
    box-shadow: 0 0 30px 0 rgba(8, 1, 3, .3);
    overflow: hidden;
}

div>img {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    margin: auto;
    width: 98%;
    height: 96%;
}

$(document).ready(function () {
    $('a').click(function () {
        $('img').eq($(this).index()).css({
            'opacity': '1'
        }).siblings().css({
            'opacity': '0'
        });
    });
    var alinks = $('a');
    for (var i = 0; i < alinks.length; i++) {
        // alinks[i].style.backgroundColor = 'red';
        // alinks[i].style.color = '#fff';
        alinks.eq(i).css({
            backgroundColor: 'red',
            color: '#fff'
        });
    }

    var index = 0;
    var swiper = function () {
        $('img').eq(index).css({
            'opacity': '1'
        }).siblings().css({
            'opacity': '0'
        });
    }
    var init = function () {
        index = 0;
        swiper();
    }
    init();
    var mouseEvent = function (e) {
        e.stopPropagation();
        if ($(this)[0].nodeName == 'A') {
            index = $(this).index;
        } else {
            return true;
        }
        swiper();
    };
    var keyEvent = function (e) {
        if (e.keyCode == 37 || e.keyCode == 38) {
            index = index > 0 ? --index : $('a').length - 1; //当前图片是否不是第一张，不是的话索引值-1，是的话索引值变为最后一张图片的索引值
        } else if (e.keyCode == 40 || e.keyCode == 39) {
            index = index < $('a').length - 1 ? ++index : 0; //当前图片是否不是最后一张，不是的话索引值+1，是的话索引值变为第一张图片的索引值0
        } else {
            return true;
        }
        swiper();
    };
    var events = {
        mouseenter: mouseEvent,
        keydown: keyEvent
    };
    $('a').add(document).on(events);
});