jQuery两种方法实现图片循环和鼠标移入移除样式改变

用到的方法：mouseenter 和 mouseleave 鼠标移入和移出，另一种方法是添加一个hover事件，该事件中规定传两个方法，分别对应mouseenter和mouseleave，两种方法都可实现，fadeTo：褪色，ul的背景颜色最好是黑色，否则褪色后颜色怪异，或者用css的滤镜添加一个亮度contrast(50%)样式，均可实现

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>picture</title>
    <link href="../../../img/camera.ico" rel="icon">
    <script src="../../../jquery-3.4.1.min.js"></script>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        #container {
            width: 400px;
            height: 150px;
            margin: 10px auto;
            border: 1px solid #333333;
            position: relative;
            overflow: hidden;
        }

        .banner {
            position: absolute;
            list-style: none;
            width: 1200px;
            height: 150px;
            background-color: black;
        }

        .banner li {
            float: left;
            width: 200px;
            height: 150px;
        }

        .banner li img {
            width: 100%;
            height: 100%;
        }
    </style>
</head>
<body>
<div id="container">
    <ul class="banner">
        <li><img src="../../../img/5.jpg"></li>
        <li><img src="../../../img/6.jpg"></li>
        <li><img src="../../../img/7.jpeg"></li>
        <li><img src="../../../img/8.jpeg"></li>
        <li><img src="../../../img/5.jpg"></li>
        <li><img src="../../../img/6.jpg"></li>
    </ul>
</div>

<script>
    $(function () {
        let $ul = $('.banner');
        let offsetLeft = 0;//define a variable save displacement
        let timer;
        timer = setInterval(fn, 10);

        function fn() {
            offsetLeft -= 1;
            if (offsetLeft < -800) {
                offsetLeft = 0;
            }
            $ul.css('left', offsetLeft);
        }
//方法一
//         $ul.children().on('mouseenter', function () {
//             clearInterval(timer);
//             // $(this).siblings().css({filter: 'contrast(50%)'})//css滤镜
//             $(this).siblings().fadeTo(100,0.5);//褪色
//         }).on('mouseleave', function () {
//             timer = setInterval(fn, 10);
//             // $(this).siblings().css({filter: 'contrast(100%)'});
//             $(this).siblings().fadeTo(0,1);
//         });
//方法二
        //hover里面写两个方法 相当于mouseenter和mouseleave，如果只写一个则enter和leave都执行这个方法
        $ul.children().hover(function () {
            clearInterval(timer);
            // $(this).siblings().css({filter: 'contrast(50%)'})//css滤镜
            $(this).siblings().fadeTo(100,0.5);//褪色
        },function () {
            timer = setInterval(fn, 10);
            // $(this).siblings().css({filter: 'contrast(100%)'});
            $(this).siblings().fadeTo(0,1);
        })
    })
</script>
</body>
</html>

效果展示:
在这里插入图片描述

Hello Hongbin

发布了20 篇原创文章 · 获赞 5 · 访问量 635

私信关注

jQuery两种方法实现图片循环和鼠标移入移除样式改变

猜你喜欢