Question

我正在制作一个在这个jsfiddle上发现的新闻自动收报机，但它不能按我的意愿工作。问题是：

因为我增加了所有div的宽度和高度。它没有正常工作，最后一个div在第二轮新闻中重叠。
主要div内的新闻div不是循环的第一个新闻应该是最后一个。
它不会暂停。

这是的小提琴 here

<script>
  window.verticalScroller = function ($elem) {
  var top = parseInt($elem.css('top'));
  var temp = - 1 * $('#verticalScroller > div').height();
  if (top < temp) {
    top = $('#verticalScroller').height()
    $elem.css('top', top);
  }
  $elem.animate({
    top: (parseInt(top) - 60)
  }, 600, function () {
    window.verticalScroller($(this))
  });
}
$(document).ready(function () {
  var i = 0;
  $('#verticalScroller > div').each(function () {
    $(this).css('top', i);
    i += 60;
    window.verticalScroller($(this));
  });
});

</script>

我正在应用这个，因为它不需要任何jquery。如果我使用带有jquery和插件的自动收报机，以前的jquery即使在不使用冲突方法之后也不起作用。请帮助我解决这个问题。

更新

<div id="verticalScroller">
<div style="position: relative;height:200px;width:352px;">1 Lorem ipsum dolor sit</div>
<div style="position: relative;height:200px;width:352px;">2 Lorem ipsum dolor sit</div>
<div style="position: relative;height:200px;width:352px;">3 Lorem ipsum dolor sit</div>
<div style="position: relative;height:200px;width:352px;">4 Lorem ipsum dolor sit</div>
</div>

css update：

#verticalScroller {
position: absolute;
width:352px;
height: 380px;
border: 1px solid red;
overflow: hidden;
}
#verticalScroller > div {
position:absolute;
width:50px;
height:50px;
border: 1px solid blue;
overflow:hidden;
}

Answer 1

您可以通过以下方式使用条件创建停止：

window.verticalScroller = function ($elem) {
    if (window.stop == false) {
        var top = parseInt($elem.css("top"));
        var temp = -1 * $('#verticalScroller > div').height();
        if (top < temp) {
            top = $('#verticalScroller').height()
            $elem.css("top", top);
        }
        $elem.animate({
            top: (parseInt(top) - 60)
        }, 600, function () {
            window.verticalScroller($(this))
        });
    } else {
        setTimeout(function () {
            window.verticalScroller($elem);
        }, 600);
    }
}


$(document).ready(function () {
    window.stop = false;
    var i = 0;
    $("#verticalScroller > div").each(function () {
        $(this).css("top", i);
        i += 60;
        window.verticalScroller($(this));
    });
    $("#verticalScroller").on('mouseenter', function () {
        window.stop = true;
    });
    $("#verticalScroller").on('mouseleave', function () {
        window.stop = false;
    });
});

<强> Working Fiddle

在鼠标悬停时暂停新闻自动收报机

1 个答案: