<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>滚动图片</title>
<link rel="stylesheet" href="jingdongshouye.css" />
<style>
#wrap{
width:600px;
height:500px;
background:#c8dac9;
margin:80px 0 0 100px;
position: relative;
border:2px solid gray;
overflow: hidden;
}
#picture{
position:absolute;
top:0px;
left:0px;
}
#picture img{
float:left;
}
</style>
<script>
window.οnlοad=function () {
var obj = document.getElementById('picture');
var obj1=obj.getElementsByTagName('img');
var flag = 0;
var otime = setInterval(show, 1000);
function show() {
if (flag ==obj1.length-1) {
flag = 0;
} else {
flag++;
}
obj.style.top = flag * (-500) + 'px';
}
}
</script>
</head>
<body>
<div id="wrap">
<div id="picture">
<img src="./photo/a.jpg" width="600px" height="500px" alt="" title="" />
<img src ="./photo/b.jpg" width="600px" height="500px" alt="" title="" />
<img src ="./photo/c.jpg" width="600px" height="500" alt="" title="" />
<img src ="./photo/d.jpg" width="600px" height="500px" alt="" title="" />
<img src ="./photo/e.jpg" width="600px" height="500px" alt="" title="" />
<img src ="./photo/f.jpg" width="600px" height="500px" alt="" title="" />
</div>
</div>
</body>
</html>