<%@ 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. mysql服务的注册，启动、停止、注销。 [delphi代码实现]

    unit Service; interface uses Windows,Classes,SysUtils,Winsvc,winsock; Type {服务句柄信息} TScmInfo=Record ...

  2. js 环形链表

     function link($no){     this.no = $no;     this.next;}function addLink($num){  var $first=$cur = {} ...

  3. ISBN-10和ISBN-13有什么区别？

    ISBN扩升至13位 1. 现有ISBN的结构 国际标准书号ISBN是英文International Standard Book Number的缩写,1971年国际标准化组织ISO(Internati ...

  4. xsd转实体类

    话说VS自带的工具,可以将xsd或者xml格式的文件转成实体类,大概格式如下 使用VS2005工具XSD.exe(SDK/v2.0/Bin/xsd.exe)自动生成实体类: xsd /c /names ...

  5. 剑指offer-面试题8.旋转数组的最小数字

    题目:把一个数组最开始的若干个元素搬到数据的末尾,我们称之为 数组的旋转.输入一个递增排序的数组的一个旋转,输出旋转数组 的最小元素.例如数组{3,4,5,1,2}为{1,2,3,4,5}的一个旋转, ...

  6. Red and Black(BFS or DFS) 分类： dfs bfs 2015-07-05 22:52 2人阅读 评论(0) 收藏

    Description There is a rectangular room, covered with square tiles. Each tile is colored either red ...

  7. 【LeetCode练习题】Maximum Depth of Binary Tree

    Maximum Depth of Binary Tree Given a binary tree, find its maximum depth. The maximum depth is the n ...

  8. LR如何利用siteScope监控MySQL性能

    本次实验,是在自己的电脑上使用APMServ5.2.6部署Discuz2.X论坛下,对该论坛的数据库MySQL5.1进行性能测试的,下面讲述LoadRunner在设计场景时,如何利用siteScope ...

  9. jar包和war包的区别：

    jar包就是别人已经写好的一些类,然后将这些类进行打包,你可以将这些jar包引入你的项目中,然后就可以直接使用这些jar包中的类和属性了,这些jar包一般都会放在lib目录下.  war是一个web模 ...

  10. css 图片 圆形显示区域

    css 图片 圆形显示区域 css 和 div 实现 方形图片 圆形显示 点击下载