<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. MFC程序执行过程剖析（转）

    一 MFC程序执行过程剖析 1)我们知道在WIN32API程序当中,程序的入口为WinMain函数,在这个函数当中我们完成注册窗口类,创建窗口,进入消息循环,最后由操作系统根据发送到程序窗口的消息调用 ...

  2. CQOI2007 余数之和

    Time Limit: 5 Sec Memory Limit: 128 MB Description 给出正整数n和k,计算j(n, k)=k mod 1 + k mod 2 + k mod 3 + ...

  3. noteone

  4. 【leetcode】1032. Stream of Characters

    题目如下: Implement the StreamChecker class as follows: StreamChecker(words): Constructor, init the data ...

  5. 看图了解RocksDB

    它是一个高性能的Key-Value数据库.设计了完善的持久化机制,同时保证性能和安全性.能够良好的支持范围查询,因为K-V记录就是按照Key来排序的. 下图为写入的流程: ​ 可以看到主要的三个组成部 ...

  6. sql200安装问题

    解决方法: 首先把安装目录和C:\Program Files下的Microsoft SQL Server文件夹删了,删除在current_user和local_machine\software\mic ...

  7. tarjan-LCA模板

    洛谷P3379 #include <cstdio> using namespace std; ; struct etype{ int t,next; }; struct qtype{ in ...

  8. php7和MongoDB插入并读取数据

    php7和MongoDB插入并读取数据 代码如下: <?php $manager = new MongoDB\Driver\Manager("mongodb://localhost:2 ...

  9. 前端每日实战：18# 视频演示如何用纯 CSS 创作 404 文字变形为 NON 文字的交互特效

    效果预览 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/ZoxjXm 可交互视频教程 此视频 ...

  10. codeforces 559D Randomizer

    题意简述: 在一个格点图中 给定一个凸$n$边形(每个定点均在格点上),随机选择其中一些点构成一个子多边形, 求子多边形的内部点个数的期望. ----------------------------- ...