<%@ 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. QWidget可以设置QStyle，它可以绘制很多东西（具体内容没研究，待续）

    QStyle * QWidget::style() const See also QWidget::setStyle(), QApplication::setStyle(), and QApplica ...

  2. Android Fragment中使用Intent组件拍照

    要在activity里面去接受,然后传递给fragment对象,fragment有很多回调调用不到 你的设备有摄像头吗? 为了确保市场上的大多数设备都能运行你的程序,必须在项目中做一些检测,保证使用的 ...

  3. Letter Combinations of a Phone Number 解答

    Question Given a digit string, return all possible letter combinations that the number could represe ...

  4. Java如何访问Axis2服务端

    import javax.xml.namespace.QName; import org.apache.axis2.AxisFault; import org.apache.axis2.address ...

  5. BCD码、十六进制与十进制互转

    在做嵌入式软件的设计中,常常会遇到十六进制.BCD码与十进制之间的转换,近期做M1卡的应用中,涉及了大量的十六进制.BCD码与十进制之间的转换.通过对BCD码.十六进制 权的理解,轻松的实现了他们之间 ...

  6. C程序设计语言(K&R)笔记

    1.表达式中float类型的操作数不会自动转换为double类型.一般来说,数学函数(如math.h)使用双精度类型的变量.使用float类型主要是为了在使用较大数组时节省存储空间,有时也为了节省机器 ...

  7. hdu 4930 Fighting the Landlords--2014 Multi-University Training Contest 6

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=4930 Fighting the Landlords Time Limit: 2000/1000 MS ...

  8. RAID技术介绍和总结

    简介 RAID是一个我们经常能见到的名词.但却因为很少能在实际环境中体验,所以很难对其原理 能有很清楚的认识和掌握.本文将对RAID技术进行介绍和总结,以期能尽量阐明其概念. RAID全称为独立磁盘冗 ...

  9. zookeeper 丢失事件/miss event

    今天在统计页面上发现有个节点丢失了,经过仔细分析后,发现同一个节点上的二个应用(同时监控zk)其中一个丢失了一个event,检查zk cluster没有发现异常... 通过网络搜寻,出现miss ev ...

  10. java学习之Date的使用

    Date使用,主要要注意将日期格式化,否则返回的是系统默认的格式.请自己查阅API文档. import java.util.*; import java.text.*; public class Te ...