<%@ 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. windbg命令详解

      DLL 该扩展仅在内核模式下使用,即使它是在Ext.dll中的. Windows NT 4.0 Ext.dll Windows 2000 Ext.dll Windows XP和之后 Ext.dll ...

  2. sqlserver 创建索引

    语法:CREATE [索引类型] INDEX 索引名称ON 表名(列名)WITH FILLFACTOR = 填充因子值0~100GO /*实例*/  CREATE NONCLUSTERED INDEX ...

  3. 剑指offer-面试题14.调整数组顺序使奇数位于偶数的前面

    题目:输入一个整数数组,实现一个函数来调整该数组中的数字的顺序, 使得所有的奇数位于数组的前半部门,所有的偶数位于数组的后半部门. 这一题一看其实是很简单的,当然在不考虑效率的情况可以这样考虑 我们将 ...

  4. hdu 2896 病毒侵袭_ac自动机

    题意:略 思路:套用ac自动机模板 #include <iostream> #include<cstdio> #include<cstring> using nam ...

  5. java没有条件编译

    摘自http://maosidiaoxian.iteye.com/blog/1290740 条件编译绝对是一个好东西.如在C或CPP中,可以通过预处理语句来实现条件编译.代码如下: #IFDEF DE ...

  6. PCRE的安装及使用

    摘自http://www.cnblogs.com/renhao/archive/2011/08/17/2143264.html PCRE的安装及使用 1.主页地址:http://www.pcre.or ...

  7. mysql的wait_timeout配置

    mysql数据库有一个wait_timeout的配置,默认值为28800(即8小时). 在默认配置不改变的情况下,如果连续8小时内都没有访问数据库的操作,再次访问mysql数据库的时候,mysql数据 ...

  8. Java程序员面试题集（1-50）(转）

    转:http://blog.csdn.net/jackfrued/article/details/17339393 下面的内容是对网上原有的Java面试题集及答案进行了全面修订之后给出的负责任的题目和 ...

  9. c# 图片简单模糊 非高斯模糊

    /// <summary>        /// 图像模糊化        /// </summary>        /// <param name="bit ...

  10. Android应用程序组件Content Provider简要介绍和学习计划

    文章转载至CSDN社区罗升阳的安卓之旅,原文地址:http://blog.csdn.net/luoshengyang/article/details/6946067 在Android系统中,Conte ...