<%@ page language="java" contentType="text/html; charset=UTF-8"

     pageEncoding="UTF-8"%>

 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

 <html>

 <head>

 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

 <title>系统欢迎</title>

 <%@ include file="/common/taglibs.jsp"%>

 </head>

 <style type="text/css">

 <!--

 #demo {

     background: #FFF;

     overflow: hidden;

     border: 1px dashed #CCC;

     width: 100%;

 }

 #demo img {

     border: 3px solid #F2F2F2;

 }

 #indemo {

     float: left;

     width: 800%;

 }

 #demo1 {

     float: left;

 }

 #demo2 {

     float: left;

 }

 -->

 </style>

 <body>

     <center>

         <h3 style="color: black">欢迎来到川庆钻探工程有限公司地球物理勘探公司山地数字地震队管理系统</h3>

     </center>

     <!-- <img alt="川庆物探山地地形图" src="${ctx}/res/images/wtimage/moutain.jpg"

         width="100%" height="650px" /> -->

     <div id="demo">

         <div id="indemo">

             <div id="demo1">

                 <a href="#"><img src="${ctx}/res/images/wtimage/view0.jpg"  width="280" height="260" border="0" /></a>

                 <a href="#"><img src="${ctx}/res/images/wtimage/view1.jpg"  width="280" height="260"border="0" /></a>

                 <a href="#"><img src="${ctx}/res/images/wtimage/view2.jpg"  width="280" height="260" border="0" /></a>

                 <a href="#"><img src="${ctx}/res/images/wtimage/view3.jpg"  width="280" height="260" border="0" /></a>

                 <a href="#"><img src="${ctx}/res/images/wtimage/view4.jpg"  width="280" height="260" border="0" /></a>

             </div>

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

         </div>

     </div>

     <script type="text/javascript">

         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>

 </html>

注意：<script>标签放置的位置，如果<script>放在<head>里面tab2.innerHTML = tab1.innerHTML;会报错，<head>会预装载js但不会执行，而在<body>里面被调用的js会随着HTML的加载被执行。

HTML标签实现图片滚动显示的更多相关文章

  1. TextView显示HTML文本时<IMG>标签指定图片的显示处理

    TextView显示文本时是支持一些HTML标签的(具体支持那些标签会在下面附录列出),不会需要先用HTML的static方法fromHtml来转换一下. Spanned text = Html.fr ...

  2. “焦点图/幻灯片”“Tab标签切换”“图片滚动”“无缝滚动”仅需一个SuperSlidev2.1

    官网:http://www.superslide2.com/index.html 1. 标签切换 / 书签切换 / 默认效果 2. 焦点图 / 幻灯片 3. 图片滚动-左 4. 图片滚动-上 5. 图 ...

  3. repeater控件 + marquee标签 实现文字滚动显示

    各种信息网站.BBS等网站上的公告信息模块的实现 拖出一个repeater控件绑定数据库中要显示的信息 在repeater的 <ItemTemplate> ... </ItemTem ...

  4. JS写四个图片滚动显示的效果

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

  5. 网站开发，推荐使用SuperSlide 插件-Tab标签切换，图片滚动，无缝滚动，焦点图

    SuperSlide 致力于解决网站大部分特效展示问题,使网站代码规范整洁,方便维护更新.网站上常用的“焦点图/幻灯片”“Tab标签切换”“图片滚动”“无缝滚动”等只需要一个SuperSlide即可解 ...

  6. Flex SuperTabNavigator Tab标签图片不显示或图片显示不完全

    <?xml version="1.0" encoding="utf-8"?> <s:Application xmlns:fx="ht ...

  7. 求帮忙解决封装jquery图片滚动问题

    今天用jquery封装了点击图片滚动,但是发现在屏幕自适应时,图片停在的位置会随着屏幕大小而错位(我引入了pocketgrid.css响应式文件,但没办法去那边修改onsize事件...),求大神.. ...

  8. Android实现图片滚动控件，含页签功能，让你的应用像淘宝一样炫起来

    首先题外话,今天早上起床的时候,手滑一下把我的手机甩了出去,结果陪伴我两年半的摩托罗拉里程碑一代就这么安息了,于是我今天决定怒更一记,纪念我死去的爱机. 如果你是网购达人,你的手机上一定少不了淘宝客户 ...

  9. HTML让字体闪动和滚动显示

    存粹的HTML让字体闪动显示: <html> <head> <title>TEST</title> <style type="text/ ...

随机推荐

  1. VCL线程的同步方法 Synchronize（用消息来同步）

    看本文时,可以同时参考:Delphi中线程类 TThread实现多线程编程(事件.临界区.Synchronize.WaitFor……) 先说一下RTL和VCL RTL(Run-Time library ...

  2. 结构体的sizeof

    首先有几条规则: 1. 结构体的成员相对于结构体的偏移量,是该成员所包含的最大简单类型(指占用内存数)的整数倍(如果该成员本身又是一个结构体,就要递归查找其简单类型,简单类型就是char short ...

  3. UESTC_邱老师的脑残粉 2015 UESTC Training for Graph Theory<Problem D>

    D - 邱老师的脑残粉 Time Limit: 12000/4000MS (Java/Others)     Memory Limit: 65535/65535KB (Java/Others) Sub ...

  4. UESTC_Eight Puzzle 2015 UESTC Training for Search Algorithm & String<Problem F>

    F - Eight Puzzle Time Limit: 3000/1000MS (Java/Others)     Memory Limit: 65535/65535KB (Java/Others) ...

  5. No enclosing instance of type Outer is accessible. Must qualify the allocation with an enclosing instance of type Outer (e.g. x.new A() where x is an instance of Outer)

    之前看内部类的时候没发现这个问题,今天写代码的时候遇到,写个最简单的例子: 下面这一段代码 红色的部分就是编译报错: No enclosing instance of type Outer is ac ...

  6. UGUI Button控件

    今天一起来学习下Button控件, Button控件其实是由Text,Button,Image组件形成的. 这里就简单介绍下Button组件 Interactable: 代表该组件是否进行交互, 我们 ...

  7. Struts2+Spring集成合并

    前边单独总结了Struts2,Spring和Ibaits框架了,那么怎么结合使用呢?这次先来看一下Sturts2和Spring的集成合并.其实挺简单的,就是导入各自的jar包以及连接彼此的jar包,分 ...

  8. SQLServer查询逻辑读最高的语句

    select top 25 p.name as [SP Name], deps.total_logical_reads as [TotalLogicalReads], deps.total_logic ...

  9. SQL DCL数据控制语言，用来定义訪问权限和安全级别；

    DCL 1. 创建用户 * CREATE USER username@IP地址 IDENTIFIED BY 'password'; > 用户仅仅能在指定的IP地址上登录 * CREATE USE ...

  10. poj 2429 Pollard_rho大数分解

    先对lcm/gcd进行分解,问题转变为从因子中选出一些数相乘,剩下的数也相乘,要求和最小. 这里能够直接搜索,注意一个问题,因为同样因子不能分配给两边(会改变gcd)所以能够将同样因子合并,这种话,搜 ...