插件封装:无限循环滚动

这个方法需要注意的是 : img元素必须要在CSS内先指定宽度,不然等JS去设置宽度的时候,由于图片本身加载进来的时候是图片原来的尺寸,当加载过程中鼠标一旦滑动了一下,就会触发hover离开的函数,这时候再鼠标滑动进去,相当于执行了两次hover离开,就会出现滚动停不下来的情况.

为防止定时器累加这种情况出现,也可以给定时器上做好预防(即开启定时器之前都要先关闭定时器):
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Title</title>
    <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>

    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .box {
            margin: 100px;
            border: 10px solid red;
        }

        ul {
            position: relative;
            height:100%;
        }

        
        img {
            width:10px;
        }

    </style>

</head>
<body>
<div class="box">
    <ul class="Container">
        <li class="item"><img
                src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1546265441638&di=fcc3e300ff763647adb9441da0cc8d24&imgtype=0&src=http%3A%2F%2Fimg.zcool.cn%2Fcommunity%2F01f5fc56d001a96ac7252ce6f2c66f.jpg"
                alt=""></li>
        <li class="item"><img
                src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1546265441637&di=07179875ce1769179ba7fcf7682dd969&imgtype=0&src=http%3A%2F%2Fpic.90sjimg.com%2Fdesign%2F00%2F76%2F66%2F13%2Ff97cdfc7cff5f7f67ec9492d6962ab43.jpg"
                alt=""></li>
        <li class="item"><img
                src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1546265441634&di=a44ba775d73a2d2b074bb3de1e48cd93&imgtype=0&src=http%3A%2F%2Fimg.zcool.cn%2Fcommunity%2F01381b56692ff532f875a5282d7efc.jpg"
                alt=""></li>
        <li class="item"><img
                src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1546265441686&di=64e378a3392c124fea54b28a0bc536f3&imgtype=0&src=http%3A%2F%2Fimg.zcool.cn%2Fcommunity%2F017f9d57638f3a0000018c1b111d2f.jpg"
                alt=""></li>

    </ul>
</div>
<script>
    window.onload = function () {
                    function infiniteLoop(Containers, item, ContainersWidth, Sum, speed) {
                // 0:先把要显示的容器长度和容器显示多少个子元素个数定义出来
                $("." + Containers).parent().css({
                    "width": ContainersWidth,
                    "background":"#000",
                    "overflow":"hidden"
        
                }); //把容器外部的元素设置为需要的效果
        
                $("." + item).css({"width": ContainersWidth / Sum,"height":"100%","float":"left"}); //将子元素的长度设置为显示长度除以显示个数
                $("." + item +">img").css({"width":"100%","height":"100%"})
        
                // 1:这里计算得出,要追加前几个子元素到容器里
                for (var i = 0; i < Sum; i++) {
                    $("." + Containers).append($("." + item).eq(i)[0].outerHTML);
                }
        
                // 2:测出子元素的将ul的长度定义出来,子元素的个数加上单个子元素长度
                var itemNumber = $("." + item).length;    //子元素个数
                var itemWidth = $("." + item).width();   //单个子元素长度
                $("." + Containers).width(itemNumber * itemWidth);   //设置容器的总长度
                var CWidth = $("." + Containers).width(); //容器总长度
                // 3:开启定时器让ul进行左滚动
                var time = 0; //定义滚动幅度的全局变量
                var coordinate = CWidth - ContainersWidth; //跳转位置:所有子元素的个数 * 单个子元素长度 - 容器可显示总长度
        
                var trmer;  //定义定时器
                // console.log("子元素个数 :"+itemNumber);
                // console.log("单个子元素长度 :"+itemWidth);
                // console.log("容器总长度 :"+ContainersWidth);
                // console.log("跳转坐标 :"+coordinate);
        
        
                function dingshi() {
                    //将定时器定义为全局变量,为后续停止定时器做准备
                    trmer = setInterval(function () {
                        time -= 2;  //每次移动的幅度
                        if (time < -coordinate) {
                            time = 0;   //跳转坐标归零操作
                        }
                        $("." + Containers).css({"marginLeft": time});
                    }, speed);
                }
        
                dingshi();
        
                //鼠标hover执行操作
                $("." + item).hover(function () {
                    //鼠标移入停止动画
                    clearInterval(trmer);//停止
                    //在进行操作的时候一定先在前面停止之前的动画,再去添加蒙版,不然会造成持续累加bug
                    $(this).siblings().stop(true).fadeTo(100, 0.2);
                    console.log("停止了")
                }, function () {
                    $("." + item).fadeTo(100, 1);  //全部删除蒙版
                    console.log("启动了")
                    dingshi();//再次定时器
                });
        
            }

        }


        /**
         *  第一个参数 :Container 容器类名 ( ul 容器)
         *  第二个参数 :item 子元素类名 ( li 子元素)
         *  第三个参数 :容器可显示的长度
         *  第四个参数 :容器可显示子元素的个数
         *  第五个参数 :滚动速度(数值越小 速度越快 越大越慢)
         */
        infiniteLoop("Container", "item", 1000, 4, 10); //整个调用程序

    }
</script>
</body>
</html>
插件封装:无限循环滚动

猜你喜欢
