我这个效果也不是太复杂，是前段时间做的。因为最近一直在忙所以一直没时间上传这个效果下看一下效果图：
做这个效果之前想说一下，首先你的 css样式 一定要熟悉。要不是做不出来的。
说一下这里用到的javascript的主要语法吧
就是设置时间的函数
setTimeout()
clearTimeout()
语法：
1 |
var t=setTimeout("javascript语句",毫秒) |
setTimeout() 方法会返回某个值。在上面的语句中，值被储存在名为 t 的变量中。假如你希望取消这个 setTimeout()，你可以使用这个变量名来指定它。
setTimeout() 的第一个参数是含有 JavaScript 语句的字符串。这个语句可能诸如 "alert('5 seconds!')"，或者对函数的调用，诸如 alertMsg()"。
第二个参数指示从当前起多少毫秒后执行第一个参数。
提示： 1000 毫秒等于一秒。
别的不多说了，下面来看下源码
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>无标题页</title>
</head>
<body>
<style type="text/<a href="http://blog.suiyiidan.cn" target="_blank" title="css">css</a>">
*{ margin:0px; padding:0px;}
#bbox{ background:url("body_home_bg.jpg")
no-repeat scroll 50% 0 transparent; height:458px;}
#box{width: 910px; height: 292px; overflow:hidden;
margin:0px auto; position:relative; top:130px;}
.list{width:910px; height: 286px; background:;
padding-top:6px;}
.list .imga{ width:401px; height:254px;
background:url("bg.jpg") no-repeat scroll center bottom
transparent; padding:12px; float:left; }
.list .imga img{border:1px solid #000000;}
.list .text
{ float:left; height:209px; margin-left:35px; padding-top:20px; width:420px; overflow:hidden;}
.list p{line-height:20px; color:#828282; margin-top:10px;}
.list h1{color:#0090FF}
.list h2{ color:#AFAFAF;}
.list .nn{ width:460px; height:48px;background:url("nav_bg.jpg") no-repeat; float:left;}
.list .nx{ width:45px; height:48px; background:url("nx.jpg") 0px 0px ;}
.list .link{ float:left; margin-left:10px;}
.list .nx{ float:right;cursor:pointer;}
.list .link a{ display; block; float:left; line-height:25px;
border:1px solid #35424C; width:147px; height:22px; margin-left:10px; margin-top:12px; text-align:center; font-size:10px; text-decoration:none; color:#AEB1B1}
</style>
<div id="bbox">
<div id="box">
<div class="list">
<div class="imga">
<a href="dd"><img src="moto.jpg" /></a>
</div>
<div class="text">
<h1>homehome</h1>
<h2>homehomehomehomehome</h2>
<p>
Marc built the international storefront for Motorola
Android handset owners. Personalization, app
matchmaking, staff recommendations, flexible payment
options and more makes it the best way to find great apps.
</p>
</div>
<div class="nn">
<div class="nx">
</div>
<div class="link">
<a href='AFAFAF' title="">LINK</a>
<a href='AFAFAF' title="">LINK</a>
</div>
</div>
</div>
<div class="list">
<div class="imga">
<a href="dd"><img src="moto.jpg" /></a>
</div>
<div class="text">
<h1>第二个</h1>
<h2>homehomehomehomehome</h2>
<p>
Marc built the international storefront
for Motorola Android handset owners.
Personalization, app matchmaking,
staff recommendations, flexible payment
options and more makes it the best way
to find great apps.
</p>
</div>
<div class="nn">
<div class="nx">
</div>
<div class="link">
<a href='AFAFAF' title="">LINK</a>
<a href='AFAFAF' title="">LINK</a>
</div>
</div>
</div>
</div>
</div>
</body>
<script type="text/javascript">
function sc(){
scrollup(document.getElementById('box'),292,0);
}
window.onload=function(){
var o=document.getElementById('box');
var ss=window.setInterval(function(){scrollup(o,292,0);},6000);
}
function scrollup(o,d,c){
if(d==c||d<c){
var t=getFirstChild(o.firstChild).cloneNode(true);
o.removeChild(getFirstChild(o.firstChild));
o.appendChild(t);
t.style.marginTop="0px";
}else{
c+=9;
getFirstChild(o.firstChild).style.marginTop=-c+"px";
window.setTimeout(function(){scrollup(o,d,c),1});
}
}
//解决firefox下会将空格回车作为节点的问题
function getFirstChild(node){
while (node.nodeType!=1)
{
node=node.nextSibling;
}
return node;
}
</script>
</html>
