js轮番代码如何修改能正常运行,代码如下
发布网友
发布时间：2022-04-24 01:02
共2个回答
热心网友
时间：2023-10-17 00:40
<script>
var area=document.getElementById("box");
area.innerHTML+=area.innerHTML;
var liHeight=24;
var delay=2000;
var speed=50;
function scrollUp(){
if(area.scrollTop>=area.scrollHeight/2)area.scrollTop=0;
setTimeout(scrollUp,area.scrollTop%liHeight?speed:delay);
area.scrollTop++;
}
scrollUp();
</script>
热心网友
时间：2023-10-17 00:40
<script>
var area=document.getElementById("box");
area.innerHTML+=area.innerHTML;
var liHeight=24;
var delay=2000;
var speed=50;
function scrollUp(){
if(area.scrollTop>=area.scrollHeight/2)area.scrollTop=0;
setTimeout(scrollUp,area.scrollTop%liHeight?speed:delay);
area.scrollTop++;
}
scrollUp();
</script>
热心网友
时间：2023-10-17 00:41
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>间歇循环滚动</title>
<style>
#box {
height: 25px;
width: 300px;
margin: 0 auto;
border: 1px solid #0066FF;
overflow: hidden;
position: relative;
}
#box li {
color: #333;
height: 24px;
}
#box ul {
margin: 0;
padding: 0;
position: absolute;
}
#con1 {
top: 0px;
}
#con2 {
top: 25px;
}
</style>
</head>
<body>
<div id="box">
<ul id="con1">
<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>
</ul>
<ul id="con2">
<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>
</ul>
</div>
<script>
var con1 = document.getElementById("con1");
var con2 = document.getElementById("con2");
var liHeight = 24;
var speed = 50;
var time1;
var time2;
var moveTop1 = 0;
var moveTop2 = 25;
scrollUp1();
function starMove() {
time = setInterval("scrollUp()", speed);
}
function scrollUp1() {
clearInterval(time2);
var len = con1.children.length;
time1 = setInterval(function(){
con1.style.top = (moveTop1--) + "px";
if(moveTop1 == -(liHeight * len)) {
moveTop1 = 25;
scrollUp2();
}
},speed)
}
function scrollUp2() {
var len = con2.children.length;
console.log(len);
clearInterval(time1);
time2 = setInterval(function(){
con2.style.top = (moveTop2--) + "px";
if(moveTop2 == -(liHeight * len)) {
moveTop2 = 25;
scrollUp1();
}
},speed)
}
</script>
</body>
</html>
热心网友
时间：2023-10-17 00:41
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>间歇循环滚动</title>
<style>
#box {
height: 25px;
width: 300px;
margin: 0 auto;
border: 1px solid #0066FF;
overflow: hidden;
position: relative;
}
#box li {
color: #333;
height: 24px;
}
#box ul {
margin: 0;
padding: 0;
position: absolute;
}
#con1 {
top: 0px;
}
#con2 {
top: 25px;
}
</style>
</head>
<body>
<div id="box">
<ul id="con1">
<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>
</ul>
<ul id="con2">
<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>
</ul>
</div>
<script>
var con1 = document.getElementById("con1");
var con2 = document.getElementById("con2");
var liHeight = 24;
var speed = 50;
var time1;
var time2;
var moveTop1 = 0;
var moveTop2 = 25;
scrollUp1();
function starMove() {
time = setInterval("scrollUp()", speed);
}
function scrollUp1() {
clearInterval(time2);
var len = con1.children.length;
time1 = setInterval(function(){
con1.style.top = (moveTop1--) + "px";
if(moveTop1 == -(liHeight * len)) {
moveTop1 = 25;
scrollUp2();
}
},speed)
}
function scrollUp2() {
var len = con2.children.length;
console.log(len);
clearInterval(time1);
time2 = setInterval(function(){
con2.style.top = (moveTop2--) + "px";
if(moveTop2 == -(liHeight * len)) {
moveTop2 = 25;
scrollUp1();
}
},speed)
}
</script>
</body>
</html>
