jQuery键盘事件，轮播图，鼠标移入移出事件mouseenter （）鼠标移入 mouseleave （）鼠标移出 m

mouseenter （）鼠标移入
mouseleave （）鼠标移出
mouseover（）鼠标移入
mouseout（）鼠标移出 hover是由mouseenter和mouseleave组成的

 mouseenter mouseleave ★在进入子元素区域的时候不会触发
        $('.div1').mouseenter(function(){
             console.log('mouseenter');
         })
        $('.div1').mouseleave(function(){
             console.log('mouseleave');
        })

         mouseover和 mouseout 在进入子元素区域的时候也会触发
         $('.div1').mouseover(function(){
           console.log('mouseover')
         })
         $('.div1').mouseout(function(){
             console.log('mouseout')
         })

keydown（）按下键盘时触发
keyup（）释放键盘时
keypress（）连续敲击键盘时触发

 /* 按下键盘时 */
        $('input[type=text]').keydown(function(){
            alert('我按下了')
        })
        /* 释放按键时 */
        $('input[type=password]').keyup(function(){
            alert('鼠标抬起了')
        })
        /* 产生可打印的字符时 连续敲击键盘的时候触发 */
        $('input[type=password]').keypress(function(){
            alert('连续敲击键盘')
        })

轮播图

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box {
            width: 500px;
            height: 300px;
            margin: 30px auto;
            border: 1px solid cyan;
            position: relative;
        }

        .img-list img {
            width: 500px;
            height: 300px;
            display: block;
            position: absolute;
            left: 0;
            top: 0;
        }

        .left,
        .right {
            position: absolute;
            width: 30px;
            line-height: 40px;
            text-align: center;
            color: #fff;
            background-color: rgba(0, 0, 0, .15);
            font-size: 20px;
            top: 50%;
            transform: translateY(-50%);
            cursor: pointer;
        }

        .left {
            left: 0;
            border-top-right-radius: 18px;
            border-bottom-right-radius: 18px;
        }

        .right {
            right: 0;
            border-top-left-radius: 18px;
            border-bottom-left-radius: 18px;
        }

        .dian {
            display: flex;
            list-style: none;
            position: absolute;
            left: 20px;
            bottom: 5px;
        }

        .dian li {
            width: 15px;
            height: 15px;
            background-color: #fff;
            margin: 0 10px;
            cursor: pointer;
            border-radius: 50%;
        }
        .dian li.active{
            background-color: red;
        }
    </style>
</head>

<body>
    <div class="box">
        <div class="img-list">
            <img src="./imgs/1.jpg" alt="">
            <img src="./imgs/2.jpg" alt="">
            <img src="./imgs/3.jpg" alt="">
            <img src="./imgs/4.jpg" alt="">
        </div>
        <div class="left">&lt;</div>
        <div class="right">&gt;</div>
        <div>
            <ul class="dian">
                <li class="active"></li>
                <li></li>
                <li></li>
                <li></li>
            </ul>
        </div>
    </div>
    <script src="./作业1：左导航特效/作业1：左导航特效/素材/js/jquery-1.12.4.js"></script>
    <script>
        $(function () {
            let i = 0;
            let timer = null;

            function start() {
                timer = setInterval(() => {
                    if (++i > 4) i = 0;
                    $("img").eq(i).show().siblings().hide();
                    $(".dian li").eq(i).addClass("active").siblings(".active").removeClass("active");
                }, 2000);
            }
            start();

            $(".dian li").click(function () {
                clearInterval(timer);
                i = $(this).index();
                $("img").eq(i).show().siblings().hide();
                    $(".dian li").eq(i).addClass("active").siblings(".active").removeClass("active");
                start();
            })

            $(".left").click(function () {
                if (++i > 4) i = 0;
                clearInterval(timer);
                // i = $(this).index();
                $("img").eq(i).show().siblings().hide();
                    $(".dian li").eq(i).addClass("active").siblings(".active").removeClass("active");
                start();
            })
            $(".right").click(function () {
                if (--i < 0) i = 4;
                clearInterval(timer);
                // i = $(this).index();
                $("img").eq(i).show().siblings().hide();
                $(".dian li").eq(i).addClass("active").siblings(".active").removeClass("active");
                start();
            })
        })


    </script>
</body>

</html>