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>
注意:<script>标签放置的位置,如果<script>放在<head>里面tab2.innerHTML = tab1.innerHTML;会报错,<head>会预装载js但不会执行,而在<body>里面被调用的js会随着HTML的加载被执行。
纸上得来终觉浅,绝知此事要躬行。
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 浏览器原生「磁吸」效果!Anchor Positioning 锚点定位神器解析
· 没有源码,如何修改代码逻辑?
· 一个奇形怪状的面试题:Bean中的CHM要不要加volatile?
· [.NET]调用本地 Deepseek 模型
· 一个费力不讨好的项目,让我损失了近一半的绩效!
· 百万级群聊的设计实践
· WPF到Web的无缝过渡:英雄联盟客户端的OpenSilver迁移实战
· 永远不要相信用户的输入:从 SQL 注入攻防看输入验证的重要性
· 全网最简单!3分钟用满血DeepSeek R1开发一款AI智能客服,零代码轻松接入微信、公众号、小程
· .NET 10 首个预览版发布,跨平台开发与性能全面提升