`
zqc_0101
  • 浏览: 229356 次
  • 性别: 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实现从左到右或从右至左的滚动效果,适用于展示文字或图片内容。 首先,确保你已经安装了Vue.js环境。如果你还没有设置,可以使用官方推荐的Vue CLI工具来快速创建一个新的项目。...

    JS不间断向左右循环滚动

    在提供的两个HTML文件中,"JS不间断右滚动.html"和"JS不间断向左滚动.html"可能分别实现了向右和向左的滚动效果。这两个文件可能包含了上述步骤的示例代码,可以作为学习和参考的模板。 需要注意的是,为了实现平滑...

    图片左右滚动

    例如,可以设置一个无限循环的CSS动画,使图片从右向左滑动,当一张图片滑出视线后,下一张图片立即从右侧滑入。CSS的关键属性可能包括`transition`(过渡效果)、`animation`(动画)以及`position`(定位)等。 ...

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

    这种效果常见于新闻更新、公告展示或者任何需要持续更新内容的区域,使得信息在有限的空间内循环滚动,既能节省空间,又能增加视觉吸引力。 在标题提到的"文字左右滚动的js代码整理-经测试非常好用"中,我们可以...

    js图片向上下左右滚动的代码 图片向上滚动js代码

    `Marquee1` 函数的工作原理是检查 `colee1` 是否已经到达 `colee` 的顶部,如果到达了,则将 `colee` 的滚动位置减去 `colee1` 的高度,使得图片看起来像是回到了原来的位置,从而实现了循环滚动的效果。同时,通过...

    向左单页滚动图片

    【向左单页滚动图片】是一种网页设计技术,主要用于创建动态视觉效果,使得网页上的图片能够自右向左逐个滚动展示,同时具备在特定时刻暂停的功能,为用户提供更好的浏览体验。这种效果常用于产品展示、新闻轮播或...

    WPFLable从右往左显示文字.7z

    在标题“WPFLable从右往左显示文字.7z”中提到的,是一个关于`Label`控件的特殊应用,即实现文字从右到左的动态滚动效果。这种效果常见于信息提示、滚动公告或者某些特殊设计的用户界面中。下面将详细解释如何在C# ...

    css实现图片(箭头)无缝滚动(向右)

    这里的动画定义了图片从初始位置(`translateX(0)`)平滑移动到容器的最右侧(`translateX(-100%)`),实现了向右滚动的效果。 接着,我们需要将这个动画应用到图片元素上。使用`animation`属性可以设置动画的名称...

    JS不间断向左滚动.rar

    在本案例中,“JS不间断向左滚动”是一个使用JavaScript实现的网页元素动态效果,通常用于展示新闻、公告或广告等信息,使内容能够不间断地从右向左自动滚动,增加用户的浏览体验。 该压缩包“JS不间断向左滚动.rar...

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

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

    可左右循环滑动的gallery图片轮播demo

    在这个特定的案例中,"可左右循环滑动的gallery图片轮播demo"是一个实现这种功能的示例项目,允许用户向左或向右滑动来浏览图片,同时支持自动定时切换,为用户提供流畅的浏览体验。 首先,我们要理解“左右循环...

    图片向左循环滚动

    "图片向左循环滚动"是这种效果的一种实现方式,它主要用于展示一组图片,通过自动循环的方式从右到左进行平滑滚动。这种效果常用于产品展示、新闻轮播或者幻灯片等场景。 实现"图片向左循环滚动"的技术核心通常基于...

    C# 滚动字幕 目前是左右滚动

    要实现更多功能,例如上下滚动或循环滚动,只需扩展此基础代码。你可以增加更多的属性来控制滚动方向和循环模式,并在定时器事件处理程序中相应地更新代码。 此外,如果想要实现更复杂的效果,例如渐入渐出、淡入...

    jquery图片无缝滚动代码左右上下无缝滚动图片

    "jQuery图片无缝滚动代码左右上下无缝滚动图片"是利用jQuery库实现的一种图片滚动技术,它使得图片能够在页面上以平滑、连续的方式移动,既可以从左到右,也可以从上到下,为用户带来流畅的视觉体验。 jQuery是一个...

    jquery多图向左滚动效果

    使用jQuery的动画方法,如`animate()`,来改变最左侧图片的`left`属性,使其逐渐向左移动,同时移动到最右侧的图片会移到队列的末尾,形成循环滚动效果。这里可以设置动画时间、速度曲线等参数。 ```javascript ...

    利用Marquee实现无缝循环滚动文字

    - 示例:`向左滚动的文字&lt;/marquee&gt;` - **`height`** 和 **`width`**: 分别设置滚动区域的高度和宽度。 - 示例:`指定高度为10%,宽度为200px的滚动区域&lt;/marquee&gt;` - **`hspace`** 和 **`vspace`**: 设置滚动...

    实现图片左右自动循环滚动效果的jquery插件scroller_roll.js.zip

    1. **自动循环**:一旦页面加载完成,图片会自动开始向左或向右滚动,无需用户手动触发。 2. **左右切换**:除了自动滚动外,插件还支持用户通过点击左右箭头手动切换图片,提供更佳的用户体验。 3. **平滑过渡**:...

    公告滚动动画,从右到左滚动,marquee标签效果

    为了使内容从右向左滚动,我们可以添加`direction`属性并设置其值为`right`: ```html 公告内容 ``` 除了方向控制,`&lt;marquee&gt;`还提供了其他几个可调整的属性,如滚动速度(`scrollamount`)、延迟开始时间(`...

    phpweb向左滚动代码

    在PHPWeb开发中,"phpweb向左滚动代码"通常是指一种实现网页元素(如产品列表)自左向右动态滚动效果的技术。这种效果常见于网站的横幅、菜单或者展示区域,能增加视觉吸引力并有效地展示大量信息。在给定的文件名中...

Global site tag (gtag.js) - Google Analytics