HTML标签实现图片滚动显示

HTML标签实现图片滚动显示
 1 <%@ page language="java" contentType="text/html; charset=UTF-8"
 2     pageEncoding="UTF-8"%>
 3 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
 4 <html>
 5 <head>
 6 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
 7 <title>系统欢迎</title>
 8 <%@ include file="/common/taglibs.jsp"%>
 9 </head>
10 <style type="text/css">
11 <!--
12 #demo {
13     background: #FFF;
14     overflow: hidden;
15     border: 1px dashed #CCC;
16     width: 100%;
17 }
18 
19 #demo img {
20     border: 3px solid #F2F2F2;
21 }
22 
23 #indemo {
24     float: left;
25     width: 800%;
26 }
27 
28 #demo1 {
29     float: left;
30 }
31 
32 #demo2 {
33     float: left;
34 }
35 -->
36 </style>
37 
38 <body>
39     <center>
40         <h3 style="color: black">欢迎来到川庆钻探工程有限公司地球物理勘探公司山地数字地震队管理系统</h3>
41     </center>
42     <!-- <img alt="川庆物探山地地形图" src="${ctx}/res/images/wtimage/moutain.jpg"
43         width="100%" height="650px" /> -->
44     <div id="demo">
45         <div id="indemo">
46             <div id="demo1">
47                 <a href="#"><img src="${ctx}/res/images/wtimage/view0.jpg"  width="280" height="260" border="0" /></a>
48                 <a href="#"><img src="${ctx}/res/images/wtimage/view1.jpg"  width="280" height="260"border="0" /></a>
49                 <a href="#"><img src="${ctx}/res/images/wtimage/view2.jpg"  width="280" height="260" border="0" /></a>
50                 <a href="#"><img src="${ctx}/res/images/wtimage/view3.jpg"  width="280" height="260" border="0" /></a>
51                 <a href="#"><img src="${ctx}/res/images/wtimage/view4.jpg"  width="280" height="260" border="0" /></a>
52             </div>
53             <div id="demo2"></div>
54         </div>
55     </div>
56     <script type="text/javascript">
57         var speed = 10; //数字越大速度越慢
58         var tab = document.getElementById("demo");
59         var tab1 = document.getElementById("demo1");
60         var tab2 = document.getElementById("demo2");
61         tab2.innerHTML = tab1.innerHTML;
62         function Marquee() {
63             if (tab2.offsetWidth - tab.scrollLeft <= 0)
64                 tab.scrollLeft -= tab1.offsetWidth;
65             else {
66                 tab.scrollLeft++;
67             }
68         }
69         var MyMar = setInterval(Marquee, speed);
70         tab.onmouseover = function() {
71             clearInterval(MyMar)
72         };
73         tab.onmouseout = function() {
74             MyMar = setInterval(Marquee, speed)
75         };
76     </script>
77 </body>
78 </html>
HTML标签实现图片滚动显示

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

HTML标签实现图片滚动显示,布布扣,bubuko.com

HTML标签实现图片滚动显示

上一篇:c# 文件类型转换汇总(word/excel/ppt/txt/pdf 转HTML&word/ppt 转swf)


下一篇:VMware中卸载安装Ubuntu系统 ——Ubuntu系统配置(一)