<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. loj2542 「PKUWC2018」随机游走 MinMax 容斥+树上高斯消元+状压 DP

    题目传送门 https://loj.ac/problem/2542 题解 肯定一眼 MinMax 容斥吧. 然后问题就转化为,给定一个集合 \(S\),问期望情况下多少步可以走到 \(S\) 中的点. ...

  2. Gitbook环境搭建及制作——2019年10月24日

    1.gitbook介绍 GitBook 是一个基于 Node.js 的命令行工具,支持 Markdown 和 AsciiDoc 两种语法格式,可以输出 HTML.PDF.eBook 等格式的电子书.可 ...

  3. shell脚本学习（4）cut

    cut 的两种用法 1种是 -c list   剪切字符串中特定位置的文字, /etc/passwd中的原始数据: yuyuyu:x:1000:1000:yuyuyu,,,:/home/yuyuyu: ...

  4. 转载--关于FPGA设计数字信号处理电路的心得

    FPGA使用的越来越广泛,除了可用于设计控制电路以为,数字信号处理电路更是FPGA的强项和难点.个人可以说才刚刚入门FPGA设计,也做过一些数字信号处理方面的电路设计,记录下个人心得体会. (一)善用 ...

  5. View使用总结

    1. View的基础知识 View的位置参数 —— 相对于父容器的位置 view在平移时,top和left表示的是原始左上角位置信息,值不会改变, 改变的是x,y(View左上角坐标),transla ...

  6. ansible控制winserver笔记

    原文地址: https://www.cnblogs.com/kingleft/p/6391652.html 环境描述: ansible控制远程windows .系统必须是sp1 .安装framewor ...

  7. 一片关于Bootstarp4的文章

    一.Bootstarp Bootstrap 是全球最受欢迎的前端组件库,用于开发响应式布局.移动设备优先的 WEB 项目.可以让你快速的排版,不用在写那些繁杂的样式.Bootstrap是开源免费的,设 ...

  8. python类与对象练习题扑克牌

    #定义一个扑克类,属性是颜色,数字.#定义一个手类,属性是扑克牌得颜色数字#定义一个人类,属性是左手,右手.类里定义一些方法,比如交换,展示 class Poker : def __init__(se ...

  9. mysql的windows客户端链接远程全套案例

    我是linux 的服务器,navicat12的客户端, 开始链接的时候需要开服务器上得对外爆漏端口 3306,方法: 添加指定需要开放的端口: firewall-cmd --add-port=/tcp ...

  10. Workflow：Workflow 目录

    ylbtech-Workflow:Workflow 目录 1.返回顶部   2.返回顶部   3.返回顶部   4.返回顶部   5.返回顶部     6.返回顶部   作者:ylbtech出处:ht ...