返回首页
当前位置: 主页 > 网络编程 > Jsp实例教程 >

js图片滚动代码

时间:2011-11-30 22:53来源:知行网www.zhixing123.cn 编辑:麦田守望者

<div id=”demo” style=”overflow: hidden; width: 605px; height:100px;margin-left:7px”>
<table height=100 cellspacing=1>
<tbody>
<tr>
<td id=demo1 valign=top><img hspace=1 src=”images/1.jpg” border=0 width=”100″ height=”80″ /><img hspace=1 src=”images/2.jpg” border=0 width=”100″ height=”80″ /><img hspace=1 src=”images/1.jpg” border=0 width=”100″ height=”80″ /><img hspace=1 src=”images/1.jpg” border=0 width=”100″ height=”80″ /><img hspace=1 src=”images/1.jpg” border=0 width=”100″ height=”80″ /><img hspace=1 src=”images/1.jpg” border=0 width=”100″ height=”80″ /><img hspace=1 src=”images/1.jpg” border=0 width=”100″ height=”80″ /></td>
<td id=demo2 valign=top><img hspace=1 src=”images/1.jpg” border=0 width=”100″ height=”80″ /><img hspace=1 src=”images/3b0e743b-3fbe-47c0-88d3-4f43be483c72.gif” border=0 width=”100″ height=”80″ /><img hspace=1 src=”images/1.jpg” border=0 width=”100″ height=”80″ /><img hspace=1 src=”images/dnwx1.gif” border=0 width=”100″ height=”80″ /><img hspace=1 src=”images/1225950981_g.gif” border=0 width=”100″ height=”80″ /><img hspace=1 src=”images/1261703426-9896.gif” border=0 width=”100″ height=”80″ /><img hspace=1 src=”images/cty8kdhtlq_w.gif” border=0 width=”100″ height=”80″ /></td>
</tr>
</tbody>
</table>
<script type=”text/javascript”>
var speed=30
document.getElementById(‘demo2′).innerHTML=document.getElementById(‘demo1′).innerHTML
function Marquee(){
if(document.getElementById(‘demo2′).offsetWidth-document.getElementById(‘demo’).scrollLeft<=0)
document.getElementById(‘demo’).scrollLeft-=document.getElementById(‘demo1′).offsetWidth
else{
document.getElementById(‘demo’).scrollLeft++
}
}
var MyMar=setInterval(Marquee,speed)
document.getElementById(‘demo’).onmouseover=function() {clearInterval(MyMar)}
document.getElementById(‘demo’).onmouseout=function() {MyMar=setInterval(Marquee,speed)}
</script>
 

------分隔线----------------------------
标签(Tag):Javascript javascript实例教程 JavaScript源代码 javascript教程
------分隔线----------------------------
推荐内容
猜你感兴趣