js实现跑马灯效果
2015-04-07 11:42:58
在我们浏览网页的时候，经常会看到照片循环播放的效果，这种效果有时候也会应用在商品的展示，通过图片的轮播可以有效的展示所有图片，并且节约网页空间，同时优化了网页的视觉效果，下面看一下实现的代码：
<table width="1024" border="0">
<tr>
<td height="200"><DIV id=demo style="OVERFLOW: hidden; WIDTH:1024px; HEIGHT: 200px" align=center>
<TABLE cellSpacing=0 cellPadding=0 align=left border=0 cellspace="0">
<TBODY>
<TR>
<TD id=demo1 vAlign=top>
<table width="1024" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td width="250"><img src="images/pic/1.gif" width="250" height="200"></td>
<td width="250"><img src="images/pic/2.gif" width="250" height="200"></td>
<td width="250"><img src="images/pic/3.gif" width="250" height="200"></td>
<td width="250"><img src="images/pic/4.gif" width="250" height="200"></td>
<td width="250"><img src="images/pic/5.gif" width="250" height="200"></td>
<td width="250"><img src="images/pic/6.gif" width="250" height="200"></td>
<td width="250"><img src="images/pic/7.gif" width="250" height="200"></td>
<td width="250"><img src="images/pic/8.gif" width="250" height="200"></td>
<td width="250"><img src="images/pic/9.gif" width="250" height="200"></td>
<td width="250"><img src="images/pic/10.gif" width="250" height="200"></td>
</table> </TD>
<TD id=demo2 vAlign=top></TD></TR></TBODY>
</TABLE>
</DIV>
<div align="center">
<SCRIPT>
var speed=1
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>
</div>
</td>
</tr>
</table>
<style>
a{ background: url(01.jpg) no-repeat; width: 150px; height: 100px; display:block;}
a:hover{ background: url(02.jpg) no-repeat;}
</style>这段简单的代码就实现了这种图片轮播的效果，其实这种效果还有一个别名，就是我这个标题所说的跑马灯。有兴趣的朋友还可以拓展一下，把table改为div或者其他形式，在增加一下js特效也非常好。
本文参与 腾讯云自媒体分享计划，分享自作者个人站点/博客。
原始发表：2015-04-07，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读