2021-05-27 无缝滚动轮播图 上下和左右均可

无缝滚动轮播图

 html

<div id='dynamic' style="height: 180px;overflow: hidden;">                       
    <ul id="feizhiding_yw">
    	<li> 诸多li...</li>
	</ul>
   <ul id="feizhiding_yw2"></ul>
</div>

js

function autoScroll(){
    var speed = 50; //数字越大速度越慢
    var tab = document.getElementById("dynamic");
    var tab1 = document.getElementById("feizhiding_yw");
    var tab2 = document.getElementById("feizhiding_yw2");

    tab2.innerHTML = tab1.innerHTML;

    function Marquee() {
            if (tab2.offsetHeight - tab.scrollTop <= 0)
                tab.scrollTop -= tab1.offsetHeight
            else {
                tab.scrollTop++;
            }
        }
        var MyMar = setInterval(Marquee, speed);
        tab.onmouseover = function () { clearInterval(MyMar) };
        tab.onmouseout = function () { MyMar = setInterval(Marquee, speed) };

        function StopMove() {
            clearInterval(MyMar)
        }

        function StartMove() {
            MyMar = setInterval(Marquee, speed)
        }
}
autoScroll()