图片的无间隙滚动代码

wxfstwxf

浏览: 205537 次
性别:
来自: 苏州

最近访客更多访客>>

windseekerjack

李政道理

whl717247746

namco2016

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

XHTML HTML

<!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>
<style type="text/css">
*{padding:0;margin:0;}
ul,li{ list-style:none;}
#sqBorder {width:802px; height:180px; padding:5px; border:1px #ccc dashed;background:#ccc;position:relative;overflow:hidden;}
#sqBorder ul{position:absolute;left:0px;}
#sqBorder div{ width:802px;overflow:hidden;}
#sqBorder li{width:206px; height:180px;float:left;text-align:center;}
#sqBorder li img {width:200px;height:150px;border:1px #333 solid;padding:2px}
</style>
<script language="javascript">
window.onload=function (){
var oDiv=document.getElementById('sqBorder');
var oUl=oDiv.getElementsByTagName('ul')[0];
var aLi=oUl.getElementsByTagName('li');
oUl.innerHTML+=oUl.innerHTML;
oUl.style.width=(aLi[0].offsetWidth)*aLi.length+'px';
var iSpeed=-1;
setInterval(function (){
oUl.style.left=oUl.offsetLeft+iSpeed+'px';
if(Math.abs(oUl.offsetLeft)>=oUl.offsetWidth/2){
oUl.style.left=oUl.offsetLeft+oUl.offsetWidth/2+'px';
}
},30);
};
</script>
</head>
<body>
<div id="sqBorder">
<div>
   <ul>
      <li><img src="http://img0.pconline.com.cn/pconline/mobile/review/1103/m9vsdefy.jpg" /><br />1111</li>
      <li><img src="http://img0.pconline.com.cn/pconline/digital/family/lcd/guides/1103/350200_6.jpg" /><br />2222</li>
      <li><img src="http://img0.pconline.com.cn/pconline/notebook/guide/time/1103/350_2501.jpg" /><br />3333</li>
      <li><img src="http://img0.pconline.com.cn/pconline/pcclub/itbbsindex/1103/%7B0E14E4A7-3D06-4563-8F7F-BB2EEDC41387%7D.jpg" /><br />4444</li>
      <li><img src="http://imgad1.3conline.com/ivy/image/20111/25/1295937715929.jpg" /><br />5555</li>
      <li><img src="http://imgad0.3conline.com/ivy/image/20113/16/1300243355860.jpg" /><br />666</li>
      <li><img src="http://img0.pconline.com.cn/pconline/notebook/guide/time/1103/350_2501.jpg" /><br />7777</li>
    </ul>
    </div>
</div>
</body>
</html>

分享到：