连续文本幻灯片 javascript(突发新闻栏)

Question

我正在尝试创建一个带有不断移动文本的简单突发新闻栏。单个文本字符串永远移动和循环，仅在悬停时停止。你知道有这样的剧本吗？我搜索了很多，但找不到。

干杯

---

到目前为止，我有这个：

<script type="text/javascript">
$(function() {
    var ele   = $('#scroll');
    var speed = 25, scroll = 5, scrolling;
    $('#scroll-up').mouseenter(function() {
        // Scroll the element up
        scrolling = window.setInterval(function() {
            ele.scrollLeft( ele.scrollLeft() - scroll );
            autoPlay: true;
        }, speed);
    });
    $('#scroll-down').mouseenter(function() {
        // Scroll the element down
        scrolling = window.setInterval(function() {
            ele.scrollLeft( ele.scrollLeft() + scroll );
            autoPlay: true;
        }, speed);
    });
    $('#scroll-up, #scroll-down').bind({
        click: function(e) {
            // Prevent the default click action
            e.preventDefault();
        },
        mouseleave: function() {
            if (scrolling) {
                window.clearInterval(scrolling);
                scrolling = false;
            }
        }
    });
});
</script>

现在我想让它自动化，让它无限循环。有什么帮助吗？

Answer 1

这是我

根据您的示例整理的内容： http://jsfiddle.net/mcknz/jEGex/

它从上到下滚动，然后又滚动到顶部，但使用垂直空间来呈现循环的外观。我敢肯定，可以变得更加优雅和动态。

.HTML：

<div id="scroll">
    <br /><br /><br /><br /><br />
    One<br /><br /><br />
    Two<br /><br /><br />
    Three<br /><br /><br />
    Four<br /><br /><br />
    Five<br /><br /><br />
    Six<br /><br /><br />
    Seven<br /><br /><br />
    <br /><br /><br /><br />
</div>         
<br>
scroll top: <span id="scrollTop"/>

JavaScript：

$(function() {
    var ele = $('#scroll');
    var speed = 35,
        scroll = 1,
        top = 0,
        maxTop = 500,
        scrolling;
    ele.mouseleave(function() {
        scrolling = window.setInterval(function() {
            top = top === maxTop ? 0 : ele.scrollTop() + scroll;
            ele.scrollTop(top);
            $('#scrollTop').text(top);
        }, speed);
    });
    ele.mouseenter(function() {
        if (scrolling) {
            window.clearInterval(scrolling);
            scrolling = false;
        }
    });
    ele.mouseleave();
});​

.CSS

#scroll {
    width: 200px;
    height: 100px;
    overflow: hidden;
    padding: 4px;
    border: solid 1px #000;
}​