<html>
<body>
<style>
.scroll {
position: absolute;
}
.scrollBox {
overflow: hidden;
position: relative;
height: 235px;
}
.scrollBox ul {
overflow: hidden;
position: absolute;
width: 100%;
left: 0px;
top: 0px;
}
.scrollBox ul li {
padding: 5px;
border-bottom: 1px dashed #eee;
cursor: pointer;
}
.scrollBox ul li .row {
margin: 5px;
}
</style>
<div class="scrollBox">
<ul class="scroll">
<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>
</ul>
</div>
<script src="https://www.sstbhzq.cn/static/tool/jquery.2.1.4.min.js"></script>
<script>
var scrollH = $('.scroll').height(); //滚动区域高度
var copy = $('.scroll').html(); //复制一份
$('.scroll').append(copy); //添加到后面
//动态执行函数
var num = 0;
function goTop() {
//重置位置
if (num <= scrollH * -1) {
num = 0;
}
num -= 1;
$(".scroll").css({ top: num })
}
//设置滚动速度20
var speed = 25;
var timer = setInterval(goTop, speed);
//设置鼠标经过时滚动停止
$(".scroll").hover(function () {
clearInterval(timer);
},
function () {
timer = setInterval(goTop, speed);
});
</script>
</body>
</html>
