最新新闻、最新文章,JavaScript实现无缝循环滚动

最新新闻、最新文章,JavaScript实现无缝循环滚动(基于jQuery)。

JS代码如下:

<script type="text/javascript">
        $(function () {
            if ($("#ulDynamic").height() > 200) {
                $("#ulDynamic").height(200);
                $("#ulDynamic").css("overflow", "hidden");
                var scroll = new s("#ulDynamic", "#ulDynamic li", 30); //参数为滚动速度,单位毫秒
                scroll.bind();
                scroll.start();
            }
        });

        function s(containerSelector, childSelector, speed) {
            this.containerSelector = containerSelector;
            this.childSelector = childSelector;
            this.rotator = $(this.containerSelector);
            this.speed = speed || 30;
            this.tid = this.tid2 = this.firstLi = null;
            this.num = 0;
            this.liCount = $(this.childSelector).length;
        }
        s.prototype = {
            bind: function () {
                var o = this;
                this.rotator.hover(function () { o.end(); }, function () { o.start(); });
            },
            start: function () {
                if ($(this.childSelector).length == this.liCount) {
                    this.firstLi = $(this.childSelector + ":first-child");
                    this.rotator.append(this.firstLi.clone());
                }
                var o = this;
                this.tid = setInterval(function () { o.rotation(); }, this.speed);
            },
            end: function () {
                clearInterval(this.tid);
                clearTimeout(this.tid2);
            },
            rotation: function () {
                var o = this;
                var firstLi = $(this.childSelector + ":first-child");
                this.num++;
                this.rotator[0].scrollTop = this.num;
                if (this.num == this.firstLi[0].scrollHeight + 0) {
                    clearInterval(this.tid);
                    this.firstLi.remove();
                    this.num = 0;
                    this.rotator[0].scrollTop = 0;
                    this.tid2 = setTimeout(function () { o.start(); }, 0);
                }
            }
        }
    </script>

页面代码如下:

<div>
        <ul id="ulDynamic" style="margin:0px; padding:0px;">
            <li>看1</li>
            <li>看这2</li>
            <li>的代码3</li>
            <li>动的代码4</li>
            <li>看码5</li>
            <li>看这的代码6</li>
            <li>看这个向上滚动的代码7</li>
            <li>看这个向动的代码8</li>
            <li>看向上滚动9</li>
            <li>看这个向动的代码10</li>
            <li>看这个向上的代码11</li>
            <li>看滚动的代码12</li>
            <li>看这个向上滚动的代码13</li>
            <li>看这个向上滚动的代码14</li>
            <li>看这个向上滚动的代码15</li>
        </ul>
    </div>

(水平有限,仅供参考。)

原文地址:https://www.cnblogs.com/liuwentian/p/2973739.html