jQ写的简单轮播图,支持鼠标移入变亮,移出复原

先上图片


代码:

 

<!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>

 

已标记关键词 清除标记
相关推荐
©️2020 CSDN 皮肤主题: 1024 设计师:白松林 返回首页