<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Language" content="zh-cn" /> <title>图片自动更新</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
} #main{
margin: 50px 0 0 50px;
width: 198px;
height: 198px;
border: 1px solid #000000;
overflow: hidden;
} #image{
position: relative;
} #image1,#image2,#image3{
width: 198px;
height: 198px;
background-color: red;
} #image2{
background-color: pink;
}
</style> <script type="text/javascript">
var i=0;
function showimage(){
document.getElementById("image").style.top=i+"px";
if(i>=-198){
i--;
t=setTimeout("showimage()",30);
}
}
</script>
</head> <body>
<div id="main">
<div id="image">
<p id="image1">image 1</p>
<p id="image2">image 2</p>
<p id="image3">image 3</p>
</div>
</div>
<input type="submit" value="滚动图片" onclick="showimage();"/></body>
</html>
问题一：
网上一般控制图片滚动是不是使用JS控制图片的位置？就是我写的这种CODE。
问题二；
我写的代码只实现了单次滚动，如何让图片一张接一张的循环滚动？并每滚动一张图片就停留5秒？
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Language" content="zh-cn" /> <title>图片自动更新</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
} #main{
margin: 50px 0 0 50px;
width: 198px;
height: 198px;
border: 1px solid #000000;
overflow: hidden;
} #image{
position: relative;
} #image1,#image2,#image3{
width: 198px;
height: 198px;
background-color: red;
} #image2{
background-color: pink;
}
</style> <script type="text/javascript">
var i=0;
function showimage(){
document.getElementById("image").style.top=i+"px";
if(i>=-198){
i--;
t=setTimeout("showimage()",30);
}
}
</script>
</head> <body>
<div id="main">
<div id="image">
<p id="image1">image 1</p>
<p id="image2">image 2</p>
<p id="image3">image 3</p>
</div>
</div>
<input type="submit" value="滚动图片" onclick="showimage();"/></body>
</html>
问题一：
网上一般控制图片滚动是不是使用JS控制图片的位置？就是我写的这种CODE。
问题二；
我写的代码只实现了单次滚动，如何让图片一张接一张的循环滚动？并每滚动一张图片就停留5秒？
2，简单代码如下var i = 0;
function showimage(){
var el = document.getElementById("image");
el.style.top=i+"px";
if(i>=-198){
i--;
setTimeout("showimage()",30);
} else {
i = el.style.top =0;
el.appendChild(el.firstElementChild);
setTimeout(function(){
setTimeout("showimage()",30);
}, 5000)
}
}