图片向左滚动代码-不间断无缝向左滚动
发布:站生 | 发布时间: 2010年8月28日图片向左滚动代码-不间断无缝代码如下:
<div class="cp1">
<div id="demo" style="overflow:hidden; width:720px;">
<table width="720px" border="0" cellspacing="0" cellpadding="0">
<tr><td id="demo1">
<table width="720px" border="0" cellspacing="3" cellpadding="3"><tr>
<td align="center">
<ul>
<li class="bor">
<a href="#"><a href="#" >
<img src="11.jpg" alt="#" border="0" width="167" height="127" /></a></li>
<li><a href="#" >蛐蛐工作室</a></li>
</ul>
</td>
<td align="center">
<ul>
<li class="bor">
<a href="#"><a href="#" >
<img src="11.jpg" alt="#" border="0" width="167" height="127" /></a></li>
<li><a href="#" >蛐蛐工作室</a></li>
</ul>
</td>
<td align="center">
<ul><li class="bor"><a href="#">
<img src="11.jpg" alt="#" border="0" width="167" height="127" /></a></li>
<li><a href="#" >蛐蛐工作室</a></li></ul>
</td>
</tr>
</table></td>
<td id="demo2"></td>
</tr>
</table>
</div>
</div>
js代码放到</body>上面即可:
<SCRIPT language=JavaScript type=text/javascript>
<!--
var demo = document.getElementById("demo");
var demo1 = document.getElementById("demo1");
var demo2 = document.getElementById("demo2");
var speed=10; //数值越大滚动速度越慢
demo2.innerHTML = demo1.innerHTML
function Marquee(){
if(demo2.offsetWidth-demo.scrollLeft<=0)
demo.scrollLeft-=demo1.offsetWidth
else{
demo.scrollLeft++
}
}
var MyMar = setInterval(Marquee,speed);
demo.onmouseover = function(){clearInterval(MyMar)}
demo.onmouseout = function(){MyMar = setInterval(Marquee,speed)}
-->
</SCRIPT>
css代码根据具体需要调整:
.bor{ border:1px solid #E3E3E3;}
.cp1{margin-left:10px;}
.cp1 ul{ float:left; padding-right:20px; margin-top:5px;}
.cp1 ul li{margin-bottom:5px;}
- 相关文章:
div,li,span元素中的span右对齐,换行显示的解决方法 (2010-8-26 11:37:30)
div,span,li自动换行的方法 (2010-8-25 18:42:32)
css实现文本两端对齐的方法 (2010-8-23 20:42:30)
上下两个div在IE6下有间距,在其它浏览器下正常的解决方法-工作室 (2010-5-25 19:5:48)
wordpress添加统计代码的方法 (2010-5-1 20:24:39)
哀悼地震遇到者,蛐蛐工作室灰白显示,特地提供灰白代码 (2010-4-20 20:21:22)
为了seo修改table为div不值 (2010-4-16 23:45:41)
DIV+CSS编写的网页IE6与IE7错位的问题 (2010-4-15 18:12:46)
写出高效的CSS代码还要靠经验 (2010-2-7 8:10:40)
关于zblog文章页面左上角加入Google广告 (2010-1-6 14:56:10)
发表评论
◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。