`
zqc_0101
  • 浏览: 226839 次
  • 性别: Icon_minigender_1
  • 来自: 武汉
社区版块
存档分类
最新评论

图片从右向左循环滚动

    博客分类:
  • html
阅读更多
<html>
<head>
</head>
<body>
<div id="con_div" style="overflow:hidden; height:80px; width:420px; color:#ff0000; margin-left:15px;">
<table align="left" cellpadding="0" cellspace="0" border="0">
<tr>
<td id="td01" valign="top">
<table border=0 cellpadding=0 cellspacing=0>
<tr>
<td>
<a href="#"><img src="befor1.jpg" width="90" height="70" /></a>
</td>
<td width="20">&nbsp;</td>         
<td>
<a href="#"><img src="befor2.jpg" width="90" height="70" /></a>
</td>
<td width="20">&nbsp;</td> 
<td>
<a href="#"><img src="befor3.jpg" width="90" height="70" /></a>
</td>
<td width="20">&nbsp;</td> 
<td>
<a href="#"><img src="befor4.jpg" width="90" height="70" /></a>
</td>
<td width="20">&nbsp;</td>
<td>
<a href="#"><img src="befor1.jpg" width="90" height="70" /></a>
</td>
<td width="20">&nbsp;</td>         
<td>
<a href="#"><img src="befor2.jpg" width="90" height="70" /></a>
</td>
<td width="20">&nbsp;</td> 
<td>
<a href="#"><img src="befor3.jpg" width="90" height="70" /></a>
</td>
<td width="20">&nbsp;</td> 
<td>
<a href="#"><img src="befor4.jpg" width="90" height="70" /></a>
</td>
<td width="20">&nbsp;</td>
</tr>
</table>
</td>
<td id="td02" valign="top"></td>
</tr>
</table>
</div>
<script>
// 速度数值越大速度越慢
var speed=10;
td02.innerHTML=td01.innerHTML;
function Marquee()
{
    if(td02.offsetWidth-con_div.scrollLeft<=0)
{
    con_div.scrollLeft-=td01.offsetWidth;
}
else
{
    con_div.scrollLeft++;
}
}
var MyMar=setInterval(Marquee,speed);
con_div.onmouseover=function() {clearInterval(MyMar)}
con_div.onmouseout=function() {MyMar=setInterval(Marquee,speed)}
</script>
</body>
</html>

 

分享到:
评论

相关推荐

    VUE实现从左到右滚动或从右至左滚动

    VUE实现从左到右滚动或从右至左滚动 可以是文字 可以是图片

    文字左右滚动的js代码整理-经测试非常好用

    文字左右滚动的js代码整理-经测试非常好用!此代码可用作网页上的新闻展示,或者公告栏,只需调整一下数值就可满足很多企业站的需求.对于网页前端设计师来说是不可缺少的代码之一!

    图片收尾相接,从右向左滚动

    用于网站合作伙伴,很实用哦,分享给大家。

    六位数码管循环滚动显示九位学号

    循环滚动显示九位学号,内含clk降频,数码管六位,设置时钟周期使用一个接口控制

    NBIOT显示逻辑显示.rar

    实现NB-IOT模块文字的滚动效果,分别从左向右循环滚动效果,从右向左循环滚动效果,从上到下循环滚动效果。

    文字列表无缝向上滚动

    文字列表无缝向上滚动,只要设定总体高度,多少行都能让文字滚动。

    小程序两种滚动公告栏的实现方法

    主要介绍了小程序两种滚动公告栏的实现方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧

    marquee无缝隙循环

    marquee无缝隙循环 向左 向右 近日研究marquee无缝隙循环,有些心得 ...3.向左循环的时候。除用表格方式外,必须固定宽度,这样就不能动态的添加图片了。 基于以上我修改了代码但愿能给大家带来方便。

    无限循环PageView列表

    如果我们还需要实现无限循环滚动,那这个解决方案肯定是不行的。所以这时候,就得我们自己实现一个 UITableView。 最开始,我写了一个组件叫 KIFlowView,实现了上面讲的需求,但是都是 iOS5 时代的产物了,难免...

    VB平滑文字滚动,上下左右滚动示例

    内容索引:VB源码,字符处理,文字滚动,电影序幕 一个VB写的文字滚动...而且没有闪烁现象,【向左滚动样式一】是循环连续滚动,【向左滚动样式二】则滚动到左端时停止一下继续滚动,【向上滚动样式一】也和前面差不多。

    类似跑马灯图片循环播放

    而不显示超过浏览器的那部分,当你向右拖动滚动条时,scrollLeft的值在增大,你就看到了右边因隐藏的东西,而看不到左边隐藏的部分。他就会从scrollLeft的位置开始显示,而不显示0-scrollLeft的元素内容。即:该元素...

    数据结构 图论 最经典的结合

    表示滚动的方向,默认为从右向左:←。可选的值有right、down、up。滚动方向分别为:right表示→,up表示↑,down表示↓。 d)scrollDelay,这也是用来控制速度的,不添加,即默认为90。值越大,速度越慢。通常...

    51开发板测试程序.rar

    里面包括一些单片机的一些程序 .掌握LED数码管动态扫描显示的...4.顺利完成之后可尝试让学号自右向左每秒钟移动一位进行滚动显示,显示过程从右边先出现第一位开始直到最后一位从最左边消失构成一个轮回,循环滚动。

    Android使用ViewPager实现左右无限滑动

    前言  网上有很多使用ViewPager实现左右滑动这一效果的资料,这些资料...其次从第一页向右滑动的时候是无法滑动的。  今天给大家分享的是另一种实现方式:创建三个图片视图放入ViewPager中默认选中第二页,在接

    javascript网页特效实例大全(8-12)

    实例282 文字从右向左依次弹出 443 实例283 文字从中间向两边展开 445 实例284 文字跑马灯特效 447 实例285 文字依次显示后快速收缩 449 实例286 文字的展开与收缩 451 实例287 状态栏中的文字依次弹出 ...

    jQuery 宽屏图片展示效果

    内容索引:脚本资源,jQuery,图片切换 又一个基于jQuery 框架的图片展示效果,很大气的图片轮番代码,非常适合宽屏电脑浏览,两张图片切换时采用自右向左平滑滚动的方式进行,自动循环所有图片,它可以很好的和动态...

    TXScrollLabelView:ScrollTXScrollLabelView,这是显示和显示信息的最佳方式,例如使用customView展示广告的广告

    支持哪种滚动类型TXScrollLabelViewTypeLeftRight :从右向左滚动,并将所有内容( scrollTitle )循环在一行中。 TXScrollLabelViewTypeUpDown :从底部滚动到顶部,并循环所有内容。 ...

Global site tag (gtag.js) - Google Analytics