Javascript 在鼠标上方暂停新闻播报器

我正在开发一个在这个JSFIDLE上找到的新闻代码，但它没有按我所希望的那样工作。问题是：

当我增加所有div的宽度和高度时，它不能正常工作，最后一个div在第二轮新闻的第一个div上重叠

主分区中的新闻分区不是循环的，第一条新闻后面应该是最后一条新闻

它不会停下来

这是小提琴

---

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

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;
    });
});

window.verticalScroller=函数（$elem）{
如果（window.stop==false）{
var top=parseInt（$elem.css（“top”））；
var temp=-1*$（'#垂直卷轴>div'）。高度（）；
如果（顶部<温度）{
顶部=$（'#垂直滚动条'）。高度（）
$elem.css（“顶部”，顶部）；
}
$elem.animate({
顶部：（parseInt（顶部）-60）
}，600，函数（）{
window.verticalScroller（$（此））
});
}否则{
setTimeout（函数（）{
垂直卷轴（$elem）；
}, 600);
}
}
$（文档）.ready（函数（）{
window.stop=false；
var i=0；
$（“#垂直滚动器>div”）。每个（函数（）{
$（this.css（“top”，i）；
i+=60；
verticalScroller（$（this））；
});
$（“#垂直滚动条”）.on（'mouseenter'，function（）{
window.stop=true；
});
$（“#垂直滚动条”）.on（'mouseleave'，function（）{
window.stop=false；
});
});

---

鼠标悬停时效果良好，但当我更改所有容器和主div的宽度和高度时，最后一个div与第一个div重叠。查看我的更新我已经更改了div的宽度和高度它彼此重叠这个鼠标在我的页面上不工作，我正在本地主机wamp服务器上运行它，但它正在工作jsfiddle@Gaurav卡里安

<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>

#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;
}

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;
    });
});