无限循环滚动--图片自己找其他的代替哦

最新推荐文章于 2023-09-25 16:59:23 发布

蔡馨

最新推荐文章于 2023-09-25 16:59:23 发布

阅读量903

点赞数

分类专栏： web前端学习文章标签： jQ无限循环滚动案例

本文链接：https://blog.csdn.net/weixin_42805130/article/details/81332643

版权

web前端学习专栏收录该内容

63 篇文章 1 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>50-无限循环滚动</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        div{
            width: 600px;
            height: 161px;
            border: 1px solid #000;
            margin: 100px auto;
            overflow: hidden;
        }
        ul{
            list-style: none;
            width: 1800px;
            height: 161px;
            background: #000;
        }
        ul>li{
            float: left;
        }
    </style>
    <script src="js/jquery-1.12.4.js"></script>
    <script>
        $(function () {
            // 0.定义变量保存偏移位
            var offset = 0;
            // 1.让图片滚动起来
            var timer;
            function autoPlay(){
                timer = setInterval(function () {
                    offset += -10;
                    if(offset <= -1200){
                        offset = 0;
                    }
                    $("ul").css("marginLeft", offset);
                }, 50);
            }
            autoPlay();

           // 2.监听li的移入和移出事件
            $("li").hover(function () {
                // 停止滚动
                clearInterval(timer);
                // 给非当前选中添加蒙版
                $(this).siblings().fadeTo(100, 0.5);
                // 去除当前选中的蒙版
                $(this).fadeTo(100, 1);
            }, function () {
                // 继续滚动
                autoPlay();
                // 去除所有的蒙版
                $("li").fadeTo(100, 1);
            });
        });
    </script>
</head>
<body>
<div>
    <ul>
        <li><img src="images/a.jpg" alt=""></li>
        <li><img src="images/b.jpg" alt=""></li>
        <li><img src="images/c.jpg" alt=""></li>
        <li><img src="images/d.jpg" alt=""></li>
        <li><img src="images/a.jpg" alt=""></li>
        <li><img src="images/b.jpg" alt=""></li>
    </ul>
</div>
</body>
</html>