jQ写的简单轮播图，支持鼠标移入变亮，移出复原_jq swiper轮播左右滚动鼠标移到对应的div高亮-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_42974569/article/details/109197850

这篇博客介绍了一种使用jQuery编写的简单轮播图实现，该轮播图在鼠标移入时图片变亮，移出后恢复原状。通过提供的代码示例，读者可以了解并学习如何应用这种交互效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

先上图片

代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <title>jQ简单轮播图</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        div{
            width: 600px;
            height: 200px;
            border: 1px solid #000;
            margin: 100px auto;
            overflow: hidden;
        }
        ul{
            list-style: none;
            width: 1800px;
            height: 200px;
            background:#000;
        }
        ul>li{
            width: 300px;
            height: 200px;
            float: left;
        }
        li>img{
            width: 300px;
            height: 200px;
        }
    </style>
    <script src="js/jquery-3.4.1.js"></script>
    <script>
        $(function(){
            var offset = 0;
            var time;
            function autoTime() {
                time = setInterval(function() {
                offset += -10;
                if(offset <= -1200){//滚动4张后，切换到第一张，最后5、6的li和1、2的li,是一样的，防止直接切换不和谐
                    offset = 0;
                }
                $("ul").css("marginLeft",offset);
            }, 100);
            }
            autoTime();
            $("li").hover(function () {
                clearInterval(time);
                $(this).siblings().fadeTo(100,0.5);//非当前li设置透明，展示ul背景颜色
                $(this).fadeTo(100,1);
            }, function () {
                autoTime();
                $("li").fadeTo(100,1);
            })
        });
    </script>
</head>
<body>
    <div>
        <ul>
            <li><img src="https://car3.autoimg.cn/cardfs/product/g2/M07/F5/39/1024x0_1_q95_autohomecar__ChsEkF5eYO6AKJwYAAZxic4CwxI158.jpg" alt=""></li>
            <li><img src="https://car2.autoimg.cn/cardfs/selected/520/g27/M05/98/07/520x390_0_q95_autohomecar__ChsEfF9guLOAPeb4AAFK3AIwGuo583.jpg" alt=""></li>
            <li><img src="https://car2.autoimg.cn/cardfs/selected/520/g26/M00/CF/E2/520x390_0_q95_autohomecar__ChwFkF8zVhaAbqfTAAFuTYdDJ6w672.jpg" alt=""></li>
            <li><img src="https://car3.autoimg.cn/cardfs/selected/520/g27/M09/97/FE/520x390_0_q95_autohomecar__ChsEfF9gtuSAMO05AAKnaUxcEZU436.jpg" alt=""></li>
            <li><img src="https://car3.autoimg.cn/cardfs/product/g2/M07/F5/39/1024x0_1_q95_autohomecar__ChsEkF5eYO6AKJwYAAZxic4CwxI158.jpg" alt=""></li>
            <li><img src="https://car2.autoimg.cn/cardfs/selected/520/g27/M05/98/07/520x390_0_q95_autohomecar__ChsEfF9guLOAPeb4AAFK3AIwGuo583.jpg" alt=""></li>
            
        </ul>
    </div>
</body>
</html>