HTML标签实现图片滚动显示

浏览数：32 / 时间：2015年06月09日

 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>