js 实现文字横向无限轮播

原理是创建轮播的文字两份,当其中一份在父控件上完全消失后让他的scrollleft再次回到起始位置

html

        

            

                2022年11月2日 星期三 农历十月初九
                1、梦天实验舱与空间站组合体在轨完成交会对接，目前已有17国科学实验项目入选中国空间站。
                2、五部门： 到2026年我国虚拟现实产业规模超过3500亿元。
                3、税务总局：累计减税降费超1万亿，目前超八成个体工商户已无需缴税。
                4、多地发布咽拭子采集规范：擦拭至少“来回3次”“上下3次”。
                5、河南、内蒙古强调精准防控：不能无差别封控，让城市逐渐恢复活力。
                6、江苏新规：在全省推行“带押过户”，降低二手房交易风险和成本。
                7、西藏那曲市尼玛县1日21时发生4.9级地震，震源深度10千米。
                8、94版《三国演义》关羽扮演者陆树铭去世，享年66岁。
            
            

        

css

        #scroll_div {
            height: 26px;
            overflow: hidden;
            white-space: nowrap;
            width: 100%;
            margin-left: 10px;
        }

        #scroll_begin,
        #scroll_end {
            display: inline;
        }

js

        function ScrollImgLeft() {
            var speed = 50;
            var MyMar = null;
            var scroll_begin = document.getElementById("scroll_begin");
            var scroll_end = document.getElementById("scroll_end");
            var scroll_div = document.getElementById("scroll_div");
            scroll_end.innerHTML = scroll_begin.innerHTML;
            console.log(scroll_begin.innerHTML + scroll_begin.innerHTML)
                        // 当文字少于宽度时scroll_end.offsetWidth - scroll_div.scrollLeft <= 0无法触发
            for (var i = 0; i < 7; i++) {
                if (scroll_begin.offsetWidth + scroll_end.offsetWidth < scroll_div.offsetWidth * 2) {
                    scroll_end.innerHTML = scroll_begin.innerHTML + scroll_begin.innerHTML;
                    scroll_begin.innerHTML = scroll_end.innerHTML
                } else {
                    break
                }
            }


            function Marquee() {
                if (scroll_end.offsetWidth - scroll_div.scrollLeft <= 0)
                    scroll_div.scrollLeft -= scroll_begin.offsetWidth;
                    // scroll_div.scrollLeft = 0
                else
                    scroll_div.scrollLeft++;
            }
            MyMar = setInterval(Marquee, speed);
            scroll_div.onmouseover = function() {
                clearInterval(MyMar);
            }
            scroll_div.onmouseout = function() {
                MyMar = setInterval(Marquee, speed);
            }
        }
        ScrollImgLeft();