js 左右滚动幻灯片

最新推荐文章于 2021-09-07 19:23:55 发布

阿呆0123

最新推荐文章于 2021-09-07 19:23:55 发布

阅读量1.9k

点赞数

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

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

本文链接：https://blog.csdn.net/pengfeihe0123/article/details/6030032

版权

js 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>不间断图片左右滚动代码演示</title>
<style type="text/css">
td {font-size: 12px;}
</style>
</head>

<BODY>
<CENTER>
<TABLE style="BORDER: #ccc 1px solid;" cellSpacing=0 cellPadding=0 width=750 align=center border=0>
<TBODY>
<TR>
    <TD>
      <DIV id=demo style="OVERFLOW: hidden; WIDTH: 100%; COLOR: #ffffff">
      <TABLE cellSpacing=0 cellPadding=0 align=left border=0 cellspace="0">
        <TBODY>
        <TR>
          <TD id=demo1 vAlign=top><table width="1200" height="88" border="0" cellpadding="0" cellspacing="0">
            <tr>
              <td width="120" background="images/putao.jpg"><div align="center">1</div></td>
              <td width="120" background="images/putao.jpg"><div align="center">
                <p>2</p>
                </div></td>
              <td width="120" background="images/putao.jpg"><div align="center">3</div></td>
              <td width="120" background="images/putao.jpg"><div align="center">4</div></td>
              <td width="120" background="images/putao.jpg"><div align="center">5</div></td>
              <td width="120" background="images/putao.jpg"><div align="center">6</div></td>
              <td width="120" background="images/putao.jpg"><div align="center">7</div></td>
              <td width="120" background="images/putao.jpg"><div align="center">8</div></td>
              <td width="120" background="images/putao.jpg"><div align="center">9</div></td>
              <td width="120" background="images/putao.jpg"><div align="center">10</div></td>
            </tr>
          </table></TD>
          <TD id=demo2 vAlign=top> </TD></TR></TBODY></TABLE></DIV>
<script language=JavaScript src="js/scrollpic.js"></script>
    </TD></TR></TBODY></TABLE></TD></TR></TABLE>
</CENTER>
</BODY>
</HTML>

--------------------------------

下面是封装在scrollpic.js里面的 js 代码：

var speed3=125//数越大越慢
demo2.innerHTML=demo1.innerHTML
function Marquee(){
if(demo2.offsetWidth-demo.scrollLeft<=0)
demo.scrollLeft-=demo1.offsetWidth
else{
demo.scrollLeft++
}
}
var MyMar=setInterval(Marquee,speed3)
demo.οnmοuseοver=function() {clearInterval(MyMar)}
demo.οnmοuseοut=function() {MyMar=setInterval(Marquee,speed3)}

运行看看效果吧、、、、

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js 左右滚动幻灯片

<br /><br /> <br /> <br /><html><br /><head><br /><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><br /><title>不间断图片左右滚动代码演示</title><br /><style type="text/css"><br />td {font-size: 12px;}<br /></style><br /></head><br /><BODY><br /><
复制链接

扫一扫

专栏目录

评论

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

到【灌水乐园】发言

查看更多评论

添加红包

成就一亿技术人!

hope_wisdom

发出的红包

实付元

使用余额支付

点击重新获取

扫码支付

钱包余额 0

抵扣说明：

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