<!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>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>百度百科向左带停顿效果的图片滚动</title>
<style>
#looou{height:120px;overflow:hidden;width:800px; }
a{font-size:12px;color:#666;text-decoration:none;}
a:hover{color:#CC0000;text-decoration:underline; }
img{border:none}
#holder1,#holder1 li{margin:0;padding:0;list-style-type:none;font-size:12px;}
#holder1{white-space:nowrap;}
#holder1 li{
width:78px;height:78px;
margin-left:10px;
display: -moz-inline-stack;
display: inline-block;
zoom: 1;
*display: inline;
}
#holder1 li div{width:76px;height:78px;overflow:hidden;vertical-align:middle;display:inline-block;line-height:78px;font-size:50px;border:1px solid #aaa; }
#holder1 li img {vertical-align:middle; }
#holder1 h4{text-align:center; }
</style></head> <body>
<div id="looou">
<ul id="holder1"> <li><div><a href="http://www.cwydesign.com" target="_blank"><img name="slidepic" src="http://www.cwydesign.com/effects/UploadFiles_7074/201008/2010081114473770.jpg" width="78" alt="畅无忧设计 " title="畅无忧设计 "></a></div><h4><a href="http://www.cwydesign.com" target="_blank" name="pftitle" title="畅无忧设计 ">畅无忧设计</a></h4></li> <li><div><a href="http://www.cwydesign.com" target="_blank"><img name="slidepic" src="http://www.cwydesign.com/effects/UploadFiles_7074/201008/2010081114473770.jpg" width="78" alt="畅无忧设计 " title="畅无忧设计鱼 "></a></div><h4><a href="http://www.cwydesign.com" target="_blank" name="pftitle" title="畅无忧设计 ">畅无忧设计 </a></h4></li> <li><div><a href="http://www.cwydesign.com" target="_blank"><img name="slidepic" src="http://www.cwydesign.com/effects/UploadFiles_7074/201008/2010081114473770.jpg" width="78" alt="畅无忧设计 " title="畅无忧设计 "></a></div><h4><a href="http://www.cwydesign.com" target="_blank" name="pftitle" title="畅无忧设计">畅无忧设计 </a></h4></li> <li><div><a href="http://www.cwydesign.com" target="_blank"><img name="slidepic" src="http://www.cwydesign.com/effects/UploadFiles_7074/201008/2010081114473770.jpg" width="78" alt="畅无忧设计 " title="畅无忧设计 "></a></div><h4><a href="http://www.cwydesign.com" target="_blank" name="pftitle" title="畅无忧设计 ">畅无忧设计</a></h4></li> <li><div><a href="http://www.cwydesign.com" target="_blank"><img name="slidepic" src="http://www.cwydesign.com/effects/UploadFiles_7074/201008/2010081114473770.jpg" width="78" alt="畅无忧设计 " title="畅无忧设计鱼 "></a></div><h4><a href="http://www.cwydesign.com" target="_blank" name="pftitle" title="畅无忧设计 ">畅无忧设计 </a></h4></li> <li><div><a href="http://www.cwydesign.com" target="_blank"><img name="slidepic" src="http://www.cwydesign.com/effects/UploadFiles_7074/201008/2010081114473770.jpg" width="78" alt="畅无忧设计 " title="畅无忧设计 "></a></div><h4><a href="http://www.cwydesign.com" target="_blank" name="pftitle" title="畅无忧设计">畅无忧设计 </a></h4></li>
<li><div><a href="http://www.cwydesign.com" target="_blank"><img name="slidepic" src="http://www.cwydesign.com/effects/UploadFiles_7074/201008/2010081114473770.jpg" width="78" alt="畅无忧设计 " title="畅无忧设计 "></a></div><h4><a href="http://www.cwydesign.com" target="_blank" name="pftitle" title="畅无忧设计 ">畅无忧设计</a></h4></li> <li><div><a href="http://www.cwydesign.com" target="_blank"><img name="slidepic" src="http://www.cwydesign.com/effects/UploadFiles_7074/201008/2010081114473770.jpg" width="78" alt="畅无忧设计 " title="畅无忧设计鱼 "></a></div><h4><a href="http://www.cwydesign.com" target="_blank" name="pftitle" title="畅无忧设计 ">畅无忧设计 </a></h4></li> <li><div><a href="http://www.cwydesign.com" target="_blank"><img name="slidepic" src="http://www.cwydesign.com/effects/UploadFiles_7074/201008/2010081114473770.jpg" width="78" alt="畅无忧设计 " title="畅无忧设计 "></a></div><h4><a href="http://www.cwydesign.com" target="_blank" name="pftitle" title="畅无忧设计">畅无忧设计 </a></h4></li>
</ul>
</div>
<script type="text/javascript">
window.onload=function(){
var jay=document.getElementById('looou'),z=10;
var inner=document.getElementById("holder1");
var len=inner.getElementsByTagName('LI').length;
var w=78+10;
inner.innerHTML+=inner.innerHTML;
(function (){
if(jay.scrollLeft==w*len) jay.scrollLeft=0;
jay.scrollLeft+=Math.ceil((w-jay.scrollLeft%w)*0.15);
z=jay.scrollLeft%w==0?2000:10;
setTimeout(arguments.callee,z);
})();
}
</script>
</body>
</html>
|
注册 登录
