HTML标签实现图片滚动显示

时间：2023-03-08 16:23:35
 <%@ 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的加载被执行。

相关文章