jQuery——17——无限循环滚动轮播图

最新推荐文章于 2021-05-30 01:36:27 发布

野生小米椒

最新推荐文章于 2021-05-30 01:36:27 发布

阅读量878

点赞数 1

分类专栏： jQuery

本文链接：https://blog.youkuaiyun.com/x1037490413/article/details/102787961

版权

jQuery 专栏收录该内容

39 篇文章

订阅专栏

注意：一共有四张图片，但是在ul里要放六张图，次序为第一张，第二张，第三张，第四张，第一张，第二张。

因为如果放四张，那么在第三张和第四张时切换第一二张因为图片不一样会闪，放六张图片，最后的第一二张放完切换先前的第一二张，有两张一样的就覆盖了，（唉表达能力较差）。

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</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-color:#000;
        }

        ul>li {
            float: left;
        }
    </style>
    <script src="../jquery/jquery-3.4.1.min.js"></script>
    <script>
        $(function () {
            var offset = 0; //设置偏移位
            var timer;

            function autoPlay() { //设置这个函数是为了后面监听移入移出事件的移出后继续滚动
                timer = setInterval(function () {
                    offset += -10;
                    if (offset <= -1200) {
                        //轮播完四张图开始从第五张开始
                        offset = 0;
                    }
                    $('ul').css('marginLeft', offset);

                }, 50)
            }
            autoPlay();
            $('li').hover(function () {
                clearInterval(timer);
                //给非当前添加蒙版
                $(this).siblings().fadeTo(100, 0.5);
                //去除当前选中的蒙版
                $(this).fadeTo(100, 1);
            }, function () {
                autoPlay();
                $('li').fadeTo(100, 1);//注意：这里不用this,用li
            })


        });
    </script>
</head>

<body>
    <div>
        <ul>
            <li><img src="img/a.jpg" alt=""></li>
            <li><img src="img/b.jpg" alt=""></li>
            <li><img src="img/c.jpg" alt=""></li>
            <li><img src="img/d.jpg" alt=""></li>
            <li><img src="img/a.jpg" alt=""></li>
            <li><img src="img/b.jpg" alt=""></li>
        </ul>
    </div>
</body>

</html>