图片循环滚动效果

最新推荐文章于 2024-09-14 18:52:56 发布

hzcaituowj

最新推荐文章于 2024-09-14 18:52:56 发布

阅读量330

点赞数 1

分类专栏： javascript 文章标签： javascript function border table

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文链接：https://blog.csdn.net/hzcaituowj/article/details/5113517

版权

javascript 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<meta name="Copyright" content="爱JavaScript中文网 http://www.ijavascript.cn/" />
<meta name="description" content="图片循环滚动代码，分享个人的JavaScript学习经历,做最好的JavaScript资料分享站点" />
<meta content="图片循环滚动代码,爱JavaScript中文网" name="keywords" />
<title>图片循环滚动代码演示</title>
<style type="text/css">
<!--
TD {FONT-SIZE: 12px;}
</style>
</head>

<BODY>
<div id=demo style="OVERFLOW: hidden; WIDTH: 760px; align: center">
<table cellspacing="0" cellpadding="0" align="center"
border="0">
    <tbody>
      <tr>
        <td id="marquePic1" valign="top">

<table width="958" height="130" border="0" cellpadding="0" cellspacing="0">
<tr>
    <td width="95" height="110" align="center">1</td>
    <td width="95" align="center"><img src="http://mat1.qq.com/www/iskin/skin4/expotclogo.gif"/>    </td>
    <td width="95" align="center"><img src="http://mat1.qq.com/www/iskin/skin4/expotclogo.gif"/>    </td>
    <td width="95" align="center"><img src="http://mat1.qq.com/www/iskin/skin4/expotclogo.gif"/>    </td>
    <td width="95" align="center"><img src="http://mat1.qq.com/www/iskin/skin4/expotclogo.gif"/>     </td>
    <td width="95" align="center"><img src="http://mat1.qq.com/www/iskin/skin4/expotclogo.gif"/>    </td>
    <td width="95" align="center"><img src="http://mat1.qq.com/www/iskin/skin4/expotclogo.gif"/></td>
    <td width="95" align="center"><img src="http://mat1.qq.com/www/iskin/skin4/expotclogo.gif"/></td>
    <td width="95" align="center"><img src="http://mat1.qq.com/www/iskin/skin4/expotclogo.gif"/></td>
    <td width="103" align="center"><img src="http://mat1.qq.com/www/iskin/skin4/expotclogo.gif"/></td>
</tr>
<tr>
    <td height="20" align="center"> </td>
    <td align="center">111111111111111;</td>
    <td align="center">&222222222222222222;</td>
    <td align="center">&123133333333333333333;</td>
    <td align="center">&444444444444;</td>
    <td align="center">&55555555555;</td>
    <td align="center">&666666666;</td>
    <td align="center">&777777777;</td>
    <td align="center">&88888888888;</td>
    <td align="center" bgcolor="#FFFF99"> </td>
</tr>
</table>
</td>
        <td id="marquePic2" valign="top"></td>
      </tr>
    </tbody>
</table>

</div>

<script type=text/javascript>
var speed=10
marquePic2.innerHTML=marquePic1.innerHTML
function Marquee(){
if(demo.scrollLeft>=marquePic1.scrollWidth){
demo.scrollLeft=0
}else{
demo.scrollLeft++
}}
var MyMar=setInterval(Marquee,speed)
demo.οnmοuseοver=function() {clearInterval(MyMar)}
demo.οnmοuseοut=function() {MyMar=setInterval(Marquee,speed)}
</script>

</BODY>
</HTML>

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录

评论

被折叠的条评论为什么被折叠?

到【灌水乐园】发言

查看更多评论

添加红包

成就一亿技术人!

hope_wisdom

发出的红包

实付元

使用余额支付

点击重新获取

扫码支付

钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。