土豆网相册
我想问一下，我现在理解了图像在div中的纵向运动，但是我想把图像按照横向的运动按我所要求的逐一运动，我开始想用css的float属性，可是在固定的div中float不能横向排列，那位高手给我指点下。。谢谢了。
程序代码：<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www. xmlns="http://www. http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
#hehe{
height:60px;
width:400px;
}
#hehe ul{
list-style:none;
margin:0px;
padding:0px;
position:relative;
bottom:65px;
left:6px;
}
#hehe ul li{
float:left;
display:block;
height:60px;
width:80px;
}
#top img{
float:left;
}
</style>
<script language="javascript">
var look=new Array(5);
look[0]="dddddddd.jpg";
look[1]="ddddddddddd.jpg";
look[2]="ddddddddddddddddddddd.jpg";
look[3]="ddddddddf.jpg";
look[4]="dd.jpg";
var num=0;
document.getElementById("footer").innerHTML=document.getElementById("top").innerHTML;
function xianshi(){
if(num==0){
document.getElementById("imgs5").style.border="none";
document.getElementById("imgs1").style.borderColor="black";
document.getElementById("imgs1").style.borderStyle="solid";
document.getElementById("imgs1").style.borderWidth=1;
if(haha.scrollLeft<400){
haha.scrollLeft++
}
else{
haha.scrollLeft=400;
num=1;
}
}
else if(num==1){
document.getElementById("imgs1").style.border="none";
document.getElementById("imgs2").style.borderColor="black";
document.getElementById("imgs2").style.borderStyle="solid";
document.getElementById("imgs2").style.borderWidth=1;
if(haha.scrollLeft<800){
haha.scrollLeft++
}
else{
haha.scrollLeft=800;
num=2;
}
}
else if(num==2){
document.getElementById("imgs2").style.border="none";
document.getElementById("imgs3").style.borderColor="black";
document.getElementById("imgs3").style.borderStyle="solid";
document.getElementById("imgs3").style.borderWidth=1;
if(haha.scrollLeft<1200){
haha.scrollLeft++
}
else{
haha.scrollLeft=1200;
num=3;
}
}
else if(num==3){
document.images[0].src=look[3];
document.getElementById("imgs3").style.border="none";
document.getElementById("imgs4").style.borderColor="black";
document.getElementById("imgs4").style.borderStyle="solid";
document.getElementById("imgs4").style.borderWidth=1;
if(haha.scrollLeft<1600){
haha.scrollLeft++
}
else{
haha.scrollLeft=1600;
num=4;
}
}
else{
document.images[0].src=look[4];
document.getElementById("imgs4").style.border="none";
document.getElementById("imgs5").style.borderColor="black";
document.getElementById("imgs5").style.borderStyle="solid";
document.getElementById("imgs5").style.borderWidth=1;
if(haha.scrollLeft<2000){
haha.scrollLeft++
}
else{
haha.scrollLeft=2000;
num=0;
}
}
}
setInterval("xianshi()",1000);
function xixi(src){
document.images[0].src=src;
}
</script>
</head>
<body>
<div id="haha" style="height:300px; width:400px; border:#69C 4px solid; overflow:hidden;">
<div id="top">
<img src="dddddddd.jpg">
<img src="dd.jpg">
<img src="ddddddddddd.jpg">
<img src="ddddddddddddddddddddd.jpg">
<img src="ddddddddf.jpg">
</div>
<div id="footer"></div>
</div>
<div id="hehe">
<ul>
<li><img src="dddddddd.jpg" height="60" width="75" id="imgs1" onmouseover="xixi('dddddddd.jpg')"></li>
<li><img src="ddddddddddd.jpg" height="60" id="imgs2" width="75" onmouseover="xixi('ddddddddddd.jpg')"></li>
<li><img src="ddddddddddddddddddddd.jpg" id="imgs3" height="60" width="75" onmouseover="xixi('ddddddddddddddddddddd.jpg')"></li>
<li><img src="ddddddddf.jpg" height="60" id="imgs4" width="75" onmouseover="xixi('ddddddddf.jpg')"></li>
<li><img src="dd.jpg" id="imgs5" height="60" width="75" onmouseover="xixi('dd.jpg')"></li>
</ul>
</div>
</body>
</html>