<body onload="beginmarquee()">

<table width="1024" border="0" cellspacing="0" cellpadding="0">

  <tr>

    <td width="200"><div id="demo" style="overflow:hidden;width:200px; height:100px">

        <div id="demo1">

        <img src="1.jpg" width="200" height="200" />

        <img src="2.jpg" width="200" height="200" />

        <img src="3.jpg" width="200" height="200" />

        <img src="4.jpg" width="200" height="200" />

        <img src="5.jpg" width="200" height="200" />

        <img src="6.jpg" width="200" height="200" />

        </div>

        <div id="demo2"></div>

    </div></td>

    <td>&nbsp;</td>

  </tr>

</table>

<div id="showtest">此处显示  id "showtest" 的内容</div>

<p>&nbsp;</p>

<p>&nbsp;</p>

                <script>

var speed=12

demo2.innerHTML=demo1.innerHTML

function Marquee()

{

if(demo2.offsetTop-demo.scrollTop<=0)

demo.scrollTop-=demo1.offsetHeight

else

{

demo.scrollTop++

}

}

var MyMar

function beginmarquee()

{

  MyMar=setInterval(Marquee,speed)

}

function endmarquee()

{

 clearInterval(MyMar)

}

//var MyMar=setInterval(Marquee,speed)

//demo.onmouseover=function() {clearInterval(MyMar)}

//demo.onmouseout=function() {MyMar=setInterval(Marquee,speed)}

              </script>

</body>

<body>

<style type="text/css">

<!--

.zhengti{width:969px; height:180px; background-image:url(c-gd.gif);}

#demo {overflow:hidden;border: 1px dashed #CCC; width:920px; margin-left:25px; padding-top:18px;}

#demo img {border: 1px solid #F2F2F2;}

#indemo {float: left;width: 800%;}

#demo1 {float: left;}

#demo2 {float: left;margin-left:8px;}

-->

</style>

<div class="zhengti">

    <div id="demo">

        <div id="indemo">

            <div id="demo1">

            <a href="#"><img src="shiyan.jpg" border="0" height="140" /></a>

            <a href="#"><img src="shiyan.jpg" border="0" height="140"/></a>

            <a href="#"><img src="shiyan.jpg" border="0" height="140" /></a>

            <a href="#"><img src="shiyan.jpg" border="0" height="140" /></a>

            <a href="#"><img src="shiyan.jpg" border="0" height="140" /></a>

            <a href="#"><img src="shiyan.jpg" border="0" height="140" /></a>

            </div>

            <div id="demo2"></div>

        </div>

    </div>

</div>

<script>

<!--

var speed=10;

var tab=document.getElementById("demo");

var tab1=document.getElementById("demo1");

var tab2=document.getElementById("demo2");

tab2.innerHTML=tab1.innerHTML;

function Marquee(){

 if(tab2.offsetWidth-tab.scrollLeft<=0)

 tab.scrollLeft-=tab1.offsetWidth

 else{

 tab.scrollLeft++;

 }

}

var MyMar=setInterval(Marquee,speed);

tab.onmouseover=function() {clearInterval(MyMar)};

tab.onmouseout=function() {MyMar=setInterval(Marquee,speed)};

-->

</script>

</body>

横纵方向走马灯滚动，纯javascript代码

横纵方向走马灯滚动，纯javascript代码的更多相关文章

  1. 纯javascript代码编写计算器程序

    今天来分享一下用纯javascript代码编写的一个计算器程序,很多行业都能用到这个程序,例如做装修预算.贷款利率等等. 首先来看一下完成后的效果: 具体代码如下:(关注我的博客,及时获取最新WEB前 ...

  2. 小白关于走马灯幻灯片的javascript代码分析

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

  3. 纯javascript代码实现浏览器图片选择预览、旋转、批量上传

    工作中遇到的业务场景,和同事一起研究了下,主要是为了兼容IE版本 其实就是一些琐碎的知识点在网上搜集下解决方式,然后集成了下,主要有以下点: 1. IE input type=file的图片预览要用I ...

  4. HTML纯javaScript代码写图片轮播

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  5. 文字列表无缝向上滚动JavaScript代码

    <!DOCTYPE html> <html> <head> <meta charset=utf-> <title>文字列表无缝向上滚动Jav ...

  6. javascript跟随滚动效果插件代码（javascript Follow Plugin）

    这篇文章介绍了javascript跟随滚动效果插件代码(javascript Follow Plugin),有需要的朋友可以参考一下Js 跟随滚动效果插件支持定义多个跟随ID,采用css fixed属 ...

  7. 纯javascript验证，100行超精简代码。

    这篇文章转自--寒飞,原帖地址http://blog.csdn.net/luoyehanfei/article/details/42262249 QQ交流群235032949 纯javascript验 ...

  8. 特殊例子--JavaScript代码实现图片循环滚动效果

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

  9. 纯javaScript、jQuery实现个性化图片轮播

    纯javaScript实现个性化图片轮播 轮播原理说明<如上图所示>: 1. 画布部分(可视区域)属性说明:overflow:hidden使得超出画布部分隐藏或说不可见.position: ...

随机推荐

  1. [BZOJ5305] [HAOI2018] 苹果树 数学 组合计数

    Summary 题意很清楚: 小 \(C\) 在自己家的花园里种了一棵苹果树, 树上每个结点都有恰好两个分支. 经过细心的观察, 小 \(C\) 发现每一天这棵树都会生长出一个新的结点. 第一天的时候 ...

  2. MySQL添加主键、索引

    查看索引  SHOW INDEX FROM  数据库表名 比如:SHOW INDEX FROM order_info; 添加索引 alter table 数据库add index 索引名称(数据库字段 ...

  3. 1.WCF学习--创建简单的WCF服务

    一.基本了解WCF 1.面向服务代表的是一种设计理念,和面向对象.面向组件一样,体现的是一种对关注点进行分解的思想,面向服务是和技术无关的 2.WCF需要依存一个运行着的宿主进程,服务寄宿就是为服务指 ...

  4. C#高级编程笔记(11至16章)异步/托管/反射/异常

    11.1.2LINQ语句 LINQ查询表达式以from子句开始,以select或者group子句结束.在这两个子句之间可以跟零个或者多个from.let.where.join或者orderby子句. ...

  5. JDBC调用oracle 存储过程

    1.创建一个oracle存储过程 p_empInfo2 并执行,使这段sql代码能编译存储到oracle数据库中. --输入员工号查询某个员工(7839)信息,将薪水作为返回值输出,给调用的程序使用 ...

  6. HihoCoder - 1673 （单调队列)

    题目:https://vjudge.net/contest/319166#problem/A 题意:有一个01矩阵,求一个最大子矩阵面积,这个矩阵要求里面都是01间隔,没有0或1连续 思路:这个题其实 ...

  7. （转）springboot应用启动原理(一) 将启动脚本嵌入jar

    转:https://segmentfault.com/a/1190000013489340 Spring Boot Takes an opinionated view of building prod ...

  8. About Intel® Processor Numbers

    http://www.intel.com/content/www/us/en/processors/processor-numbers.html About Intel® Processor Numb ...

  9. jmeter 自动生成测试报告命令

    环境要求 1:jmeter3.0版本之后开始支持动态生成测试报表 2:jdk版本1.7以上 3:需要jmx脚本文件 基本操作 1:在你的脚本文件路径下,执行cmd命令:jmeter -n -t tes ...

  10. Kali开启SSH服务

    1.    一.配置SSH参数 修改sshd_config文件,命令为: vi /etc/ssh/sshd_config 将#PasswordAuthentication no的注释去掉,并且将NO修 ...