JavaScript实现走马灯效果[无缝连接、循环滚动]

最新推荐文章于 2024-04-18 20:31:21 发布
最新推荐文章于 2024-04-18 20:31:21 发布
阅读量2.9k 收藏 1
点赞数
文章标签： javascript function xhtml border html server
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/zxl315/article/details/4490773
版权

向右：

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="you.aspx.cs" Inherits="you" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
</head>
<body>
<div align="center" id="demo" style="overflow:hidden;height:33px;width:500px;border-width:1px 1px 1px 1px;border-style:dotted dotted dotted dotted;">
  <table border="0" cellspacing="0" cellpadding="0">
    <tr>
      <td id="demo1"><img src="images/logo_1.gif"><img src="images/logo/flashempire.gif"><img src="images/logo.gif"><img src="images/logo/5dmedia.gif"><img src="images/logo/macromedia.gif"><img src="images/logo/sucaiw.gif"><img src="images/logo/blueieda.gif"><img src="images/logo/htmlcn.gif" border="0"><img src="images/logo/flashempire.gif"><img src="images/logo.gif"><img src="images/logo/5dmedia.gif"><img src="images/logo/macromedia.gif"><img src="images/logo/sucaiw.gif"><img src="images/logo/blueieda.gif"><img src="images/logo/htmlcn.gif" border="0"><img src="images/logo/flashempire.gif"><img src="images/logo.gif"><img src="images/logo/5dmedia.gif"><img src="images/logo/macromedia.gif"><img src="images/logo/sucaiw.gif"><img src="images/logo/blueieda.gif"><img src="images/logo/htmlcn.gif" border="0"><img src="images/logo/flashempire.gif"><img src="images/logo.gif"><img src="images/logo/5dmedia.gif"><img src="images/logo/macromedia.gif"><img src="images/logo/sucaiw.gif"><img src="images/logo/blueieda.gif"><img src="images/logo/htmlcn.gif" border="0"></td>
      <td id="demo2"> </td>
    </tr>
  </table>
</div>

<script language="javascript" type="text/javascript">
<!--
var demo = document.getElementById("demo");
var demo1 = document.getElementById("demo1");
var demo2 = document.getElementById("demo2");
var speed=10;    //数值越大滚动速度越慢
demo2.innerHTML = demo1.innerHTML;
demo.scrollLeft = demo.scrollWidth;
function Marquee(){
    if(demo.scrollLeft<=0)
        demo.scrollLeft+=demo2.offsetWidth
    else{
        demo.scrollLeft--
    }
}
var MyMar = setInterval(Marquee,speed)
demo.onmouseover = function(){clearInterval(MyMar)}
demo.onmouseout = function(){MyMar = setInterval(Marquee,speed)}
-->
</script>

</body>
</html>


向左：

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="zuo.aspx.cs" Inherits="zuo" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
</head>
<body>
<div align="center" id="demo" style="overflow:hidden;height:33px;width:400px;border-width:1px 1px 1px 1px;border-style:dotted dotted dotted dotted;">
  <table border="0" cellspacing="0" cellpadding="0">
    <tr>
      <td id="demo1"><img src="images/logo_1.gif"><img src="images/logo/flashempire.gif"><img src="images/logo.gif"><img src="images/logo_1.gif"><img src="images/logo_1.gif"><img src="images/logo/flashempire.gif"><img src="images/logo.gif"><img src="images/logo_1.gif"><img src="images/logo/flashempire.gif"><img src="images/logo.gif"><img src="images/logo_1.gif"><img src="images/logo/flashempire.gif"><img src="images/logo.gif"><img src="images/logo/5dmedia.gif"><img src="images/logo/macromedia.gif"><img src="images/logo/sucaiw.gif"><img src="images/logo/blueieda.gif"><img src="images/logo/htmlcn.gif" border="0"></td>
      <td id="demo2"> </td>
    </tr>
  </table>
</div>

<script language="javascript" type="text/javascript">
<!--
    var demo = document.getElementById("demo");
    var demo1 = document.getElementById("demo1");
    var demo2 = document.getElementById("demo2");
    var speed = 10;    //数值越大滚动速度越慢
    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>

</body>
</html>

向下：

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="xia.aspx.cs" Inherits="xia" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
</head>
<body>
    <!-- 指向链接图片的URL -->
<div align="center" id="demo" style="overflow:hidden;height:200px;width:95px;border-width:1px 1px 1px 1px;border-style:dotted dotted dotted dotted;">
    <div id="demo1">
        <!-- 定义内容-->
        <img src="images/logo_1.gif"><br />
        <img src="images/logo/flashempire.gif"><br />
        <img src="images/logo.gif"><br />
        <img src="images/logo/5dmedia.gif"><br />
        <img src="images/logo/macromedia.gif"><br />
        <img src="images/logo/sucaiw.gif"><br />
        <img src="images/logo/blueieda.gif"><br />
        <img src="images/logo/htmlcn.gif"><br />
        <img src="images/logo/fwcn.gif"><br />
    </div>
    <div id="demo2"></div>
</div>
<script language="javascript" type="text/javascript">
<!--
var demo = document.getElementById("demo");
var demo1 = document.getElementById("demo1");
var demo2 = document.getElementById("demo2");
var speed=10;    //数值越大滚动速度越慢
demo2.innerHTML = demo1.innerHTML;
demo.scrollTop = demo.scrollHeight;
function Marquee(){
    if(demo1.offsetTop-demo.scrollTop>=0)
        demo.scrollTop+=demo2.offsetHeight
    else{
        demo.scrollTop--
    }
}
var MyMar = setInterval(Marquee,speed);
demo.onmouseover = function(){clearInterval(MyMar)}
demo.onmouseout = function(){MyMar = setInterval(Marquee,speed)}
-->
</script>

</body>
</html>


向上：

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="t.aspx.cs" Inherits="t" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
</head>
<body>
  <!-- 指向链接图片的URL -->
<div align="center" id="demo" style="overflow:hidden;height:200px;width:95px;border-width:1px 1px 1px 1px;border-style:dotted dotted dotted dotted;">
    <div id="demo1">
        <!-- 定义内容-->
        <img src="images/logo_1.gif"><br />
        <img src="images/logo/flashempire.gif"><br />
        <img src="images/logo.gif"><br />
        <img src="images/logo/5dmedia.gif"><br />
        <img src="images/logo/macromedia.gif"><br />
        <img src="images/logo/sucaiw.gif"><br />
        <img src="images/logo/blueieda.gif"><br />
        <img src="images/logo/htmlcn.gif"><br />
        <img src="images/logo/fwcn.gif"><br />
    </div>
    <div id="demo2"></div>
</div>

<script language="javascript" type="text/javascript">
    var demo = document.getElementById("demo");
    var demo1 = document.getElementById("demo1");
    var demo2 = document.getElementById("demo2");
    var speed = 10;    //滚动速度值，值越大速度越慢
    demo2.innerHTML = demo1.innerHTML    //克隆demo2为demo1
    function Marquee() {
        if (demo2.offsetTop - demo.scrollTop <= 0)    //当滚动至demo1与demo2交界时
            demo.scrollTop -= demo1.offsetHeight    //demo跳到最顶端
        else {
            demo.scrollTop++
        }
    }
    var MyMar = setInterval(Marquee, speed);        //设置定时器
    demo.onmouseover = function() { clearInterval(MyMar) }    //鼠标经过时清除定时器达到滚动停止的目的
    demo.onmouseout = function() { MyMar = setInterval(Marquee, speed) }    //鼠标移开时重设定时器
</script>

</body>
</html>

zhaosoft1982
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
Javascript走马灯效果大全（无缝循环）
12-12 2160
一、向上的滚动效果http://blog.netfetch.cn" target="_blank">http://blog.netfetch.cn">                                                                                            var demo = document.getElemen
JS+CSS3 动画 函数节流setTimeout 无缝连续滚动特效 跑马灯动画
HandsomeDanielWu的博客
07-28 289
JS+CSS3 动画 函数节流setTimeout 无缝连续滚动特效 跑马灯动画
利用Scrip实现走马灯效果[无缝连接、循环滚动]
紫藤阁
05-26 1278
 以下代码在IE6、Firefox+Win2k环境下测试通过下面说一下这个相对简单的实现思路：一个设定宽度并且隐藏超出它宽度的内容的容器demo，里面放demo1和demo2，demo1是滚动内容,demo2为demo1的直接克隆，通过不断改变demo1的scrollTop或者scrollLeft达到滚动的目的，当滚动至demo1与demo2的交界处时直接跳回初始位置，因为demo
web前端之接近完美的跑马灯、绝对定位父元素高度塌陷问题、巧妙的计算速度、动态设置高度、走马灯动画、文本滚动、清除浮动、相对定位、四舍五入、流水灯、坍塌、translateX、absolute
最新发布
软件毕设协助及软件开发、IT、程序、编程、程序员、写代码、工程师、互联网、物联网、技术栈、软件开发、硬件开发、计算机科技、智慧电子模块。
04-18 1198
web前端之接近完美的跑马灯、绝对定位父元素高度塌陷问题、巧妙的计算速度、动态设置高度、走马灯动画、文本滚动、清除浮动、相对定位、四舍五入、流水灯、坍塌、translateX、absolute
js文字跑马灯
dbj1245的专栏
09-18 158
实现文字跑马灯效果，主要控制scrollLeft. 效果图如下 代码如下 <html> <head> <script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.1.0.min.js"></script> <s...
(转)无缝连接、循环滚动的走马灯效果
jcyka的专栏
02-09 1054
JavaScript实现走马灯效果[无缝连接、循环滚动] 无缝跑马灯效果 以下代码在IE6、Firefox+Win2k环境下测试通过 一、向上的无缝循环滚动 HTML代码 &lt;!-- 指向链接图片的URL --&gt;&lt;base href="&lt;a href="http://blog.ad0.cn" target="_blank"&gt;http://blog.ad0.cn&lt...
基于javascript实现文字无缝滚动效果
10-22
在本示例中，我们将深入探讨如何使用JavaScript实现文字无缝滚动效果，这是一种常见的网页动态效果，常用于新闻滚动、公告显示等场景。 首先，我们需要理解基本的HTML和CSS结构。在提供的代码中，我们看到一个`...
vue实现图片滚动的示例代码(类似走马灯效果)
08-27
Vue 实现图片滚动的示例代码（类似走马灯效果） 在本示例代码中，我们将学习如何使用 Vue 实现图片滚动的效果，类似于走马灯的效果。该示例代码具有很好的参考价值，对大家有所帮助。 知识点 1: Vue 组件的使用 ...
纯javascript实现四方向文本无缝滚动效果
10-24
本文主要给大家分享了使用纯javascript实现的可控制的四方向文本无缝滚动的代码，效果非常不错，有需要的小伙伴可以参考下。
javascript实现多张图片左右无缝滚动效果
10-20
本文主要介绍了javascript实现多张图片左右无缝滚动效果的实例。具有很好的参考价值。下面跟着小编一起来看下吧
javascript实现的上下无缝滚动效果
10-21
主要介绍了javascript实现的上下无缝滚动效果,具有无缝滚动及响应鼠标滑过停止滚动的功能,简便实用,需要的朋友可以参考下
走马灯JS
12-14
一个简单的走马灯JS
简单代码实现跑炫酷马灯效果
07-19
简单实现炫酷的跑马灯，可自定义效果。修改源代码定制
js实现跑马灯效果
07-23
js里面就实现跑马灯，有上、下、左、右滚动效果，
用javascript实现的跑马灯控件，文字跑马灯或图片跑马灯皆可噢！
09-27
自己用js实现的一个跑马灯控件，通过传入参数对象实例化它，然后启动即可。支持的参数有 div对象（id名称或dom对象都可以，已经在内部作了处理） 宽度（可选） 高度（可选） 内容（由数组实现，数组里存放任何html内容都可以，示例里存放的是img标签，也就是说，实现了几张图片的跑马灯效果）。
用几行代码做一个十分简单的无限循环播放的走马灯例子
03-09
这是一个十分简单的走马灯效果的小例子。项目工程用Android Stduio来完成。如果是eclipse的朋友可以复制一下代码就能运行了。里面代码就有注释说明实现的原理。
javaScript学习笔记（四）案例篇（无缝连接轮播、跑马灯轮播、呼吸轮播）
大西瓜
06-21 121
轮播案例一、无缝连接轮播一、跑马灯轮播三、呼吸轮播 一、无缝连接轮播 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initia
javascript实现走马灯效果[无缝连接、循环滚动、无空白maquee]
iteye_16634的博客
05-22 791
以下代码在IE6、Firefox+Win2k环境下测试通过 一、向上的无缝循环滚动 程序代码： [ 复制代码到剪贴板 ] ...
JavaScript实现简单循环切换功能.
a136083223的博客
04-07 310
主要是定义一个"t"变量.然后在循环里赋予各不同的字符串值. 还有就是用到setAttribute方法. 当t=="tt"的时候把t=="mm",然后把ID为"blue"的div的ID="red". 整体代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w...
javascript实现图片循环滚动效果
05-27
可以使用以下代码实现图片循环滚动效果： HTML代码： ```html ``` CSS代码： ```css .slider { overflow: hidden; } .slider-container { display: flex; width: 400%; animation: slide 10s...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值