<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. UVa1636 Headshot 【迁移自洛谷博客】

    说明:小蒟蒻hkk现在正在做一些概率的题目,由于这方面和数学还有点关系,所以需要一些数学的思维,也需要表述出来,如夏军所述"把自己给讲懂",所以写了些blog,主要为帮助自己理解. ...

  2. apache You don't have permission to access / on this server.无权访问

    环境:ubuntu16.4 apache2 原因:修改了apache web项目路径 解决: 1. 修改 /etc/apache2/sites-available/000-default.conf 文 ...

  3. Facebook的利润创下历史新高，不受最近的丑闻影响

    外媒:Facebook周三表示,其第一季度收入主要由广告支出,增长49%至120亿美元.净利润同比增长65%,创纪录的49亿美元. 尽管很多用户表示,他们在3月中旬发生的隐私丑闻导致他们删除了Face ...

  4. redisTemplate 封装bitcout

    @Repositorypublic class RedisServiceExtend { @Autowired private RedisTemplate<String, String> ...

  5. java获取当月日期 和 周末

    /** * java获取 当月所有的日期集合 * @return */public static List<Date> getDayListOfMonth() { List list = ...

  6. spring-boot和redis的缓存使用

    1.运行环境 开发工具:intellij idea JDK版本:1.8 项目管理工具:Maven 4.0.0 2.Maven Plugin管理 pom.xml配置代码: <?xml versio ...

  7. LOJ 2979 「THUSCH 2017」换桌——多路增广费用流

    题目:https://loj.ac/problem/2979 原来的思路: 优化连边.一看就是同一个桌子相邻座位之间连边.相邻桌子对应座位之间连边. 每个座位向它所属的桌子连边.然后每个人建一个点,向 ...

  8. 2018-2019-2 20175203 实验四《Android 开发基础》

    20175203 2018-2019 实验四<Android 开发基础> 实验要求 参考Android开发简易教程 完成云班课中的检查点,也可以先完成实验报告,直接提交.注意不能只有截图, ...

  9. （转）Groovy简介

    转:https://www.w3cschool.cn/groovy/ Groovy的官方网站是http://www.groovy-lang.org/ Groovy是一种基于JVM(Java虚拟机)的敏 ...

  10. js中slice、splice、substr、split方法

    1.slice 可用于数组与字符串,返回一个新的数组,原数组不改变,包含从 start 到 end (不包括该元素)的 arrayObject 中的元素. 在string中 slice(start,e ...