1 css+div可以实现动态图片切换。通过修改className。
如:function aaa(){
document.getElementById("div1").className="a1";
document.getElementById("span1").className="a_1";
document.getElementById("span2").className="a_2";
window.setTimeout("bbb()",5000);
}
function bbb(){
document.getElementById("div1").className="a2";
document.getElementById("span1").className="a_2";
document.getElementById("span2").className="a_1";
window.setTimeout("aaa()",5000);
}
2 window.setTimeout为js自带的停滞函数。第一个参数为函数名的字符串类型,第二个参数为时间(毫秒)的整数类型
如:window.setTimeout("bbb()",5000);
表示停滞5秒后执行bbb函数。在此之前进行执行该语句后面的内容。
3 css中设置背景图片,通过background或者background-image即可。值用url(图片路径)
如:background:url(1.jpg);
background-image:url(./images/1.jpg);
4 jsp页面中图片的路径采用的是相对路径。则这时如果base标签的href属性存在的话。会依次为路径开头。注意该点,否则图片会显示不出来。
完整的例子:
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base>
<title>My JSP 'test1.jsp' starting page</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<!--
width:192px;height:20px;overflow:hidden;zIndex:3;position:relative;margin-bottom: 0px;text-align:right;
<link rel="stylesheet" type="text/css" href="styles.css">
-->
<style type="text/css">
.a1{
width:200px;
height:200px;
background:url(1.jpg);
color:red;
}
.a2{
width:200px;
height:200px;
background:url(./images/popup_1.gif);
}
.a_1{
padding:10px 5px 1px 5px;
margin-right:0px;
cursor:pointer;
font-size:12px;
color:#FFFFFF;
background:#FF7E00;
}
.a_2{
padding:10px 5px 1px 5px;
margin-right:0px;
cursor:pointer;
font-size:12px;
color:#FFFFFF;
background:#838B90;
}
</style>
</head>
<body οnlοad="onload_fun()">
<div id="div1" class="a1">
<div style="height:190px"></div>
<div style="padding-bottom:0px; background-color:#AAA; width:100%; ">
<span id="span1" class="a_1" >
<a href="javascript:void(0)" οnclick="aaa()">1</a>
</span>
<span id="span2" class="a_2">
<a href="javascript:void(0)" οnclick="bbb()">2</a>
</span>
</div>
</div>
</body>
<script type="text/javascript" language="javascript">
function onload_fun(){
window.setTimeout("aaa()",3000);
}
function aaa(){
document.getElementById("div1").className="a1";
document.getElementById("span1").className="a_1";
document.getElementById("span2").className="a_2";
window.setTimeout("bbb()",5000);
}
function bbb(){
document.getElementById("div1").className="a2";
document.getElementById("span1").className="a_2";
document.getElementById("span2").className="a_1";
window.setTimeout("aaa()",5000);
}
</script>
</html>
如:function aaa(){
document.getElementById("div1").className="a1";
document.getElementById("span1").className="a_1";
document.getElementById("span2").className="a_2";
window.setTimeout("bbb()",5000);
}
function bbb(){
document.getElementById("div1").className="a2";
document.getElementById("span1").className="a_2";
document.getElementById("span2").className="a_1";
window.setTimeout("aaa()",5000);
}
2 window.setTimeout为js自带的停滞函数。第一个参数为函数名的字符串类型,第二个参数为时间(毫秒)的整数类型
如:window.setTimeout("bbb()",5000);
表示停滞5秒后执行bbb函数。在此之前进行执行该语句后面的内容。
3 css中设置背景图片,通过background或者background-image即可。值用url(图片路径)
如:background:url(1.jpg);
background-image:url(./images/1.jpg);
4 jsp页面中图片的路径采用的是相对路径。则这时如果base标签的href属性存在的话。会依次为路径开头。注意该点,否则图片会显示不出来。
完整的例子:
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base>
<title>My JSP 'test1.jsp' starting page</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<!--
width:192px;height:20px;overflow:hidden;zIndex:3;position:relative;margin-bottom: 0px;text-align:right;
<link rel="stylesheet" type="text/css" href="styles.css">
-->
<style type="text/css">
.a1{
width:200px;
height:200px;
background:url(1.jpg);
color:red;
}
.a2{
width:200px;
height:200px;
background:url(./images/popup_1.gif);
}
.a_1{
padding:10px 5px 1px 5px;
margin-right:0px;
cursor:pointer;
font-size:12px;
color:#FFFFFF;
background:#FF7E00;
}
.a_2{
padding:10px 5px 1px 5px;
margin-right:0px;
cursor:pointer;
font-size:12px;
color:#FFFFFF;
background:#838B90;
}
</style>
</head>
<body οnlοad="onload_fun()">
<div id="div1" class="a1">
<div style="height:190px"></div>
<div style="padding-bottom:0px; background-color:#AAA; width:100%; ">
<span id="span1" class="a_1" >
<a href="javascript:void(0)" οnclick="aaa()">1</a>
</span>
<span id="span2" class="a_2">
<a href="javascript:void(0)" οnclick="bbb()">2</a>
</span>
</div>
</div>
</body>
<script type="text/javascript" language="javascript">
function onload_fun(){
window.setTimeout("aaa()",3000);
}
function aaa(){
document.getElementById("div1").className="a1";
document.getElementById("span1").className="a_1";
document.getElementById("span2").className="a_2";
window.setTimeout("bbb()",5000);
}
function bbb(){
document.getElementById("div1").className="a2";
document.getElementById("span1").className="a_2";
document.getElementById("span2").className="a_1";
window.setTimeout("aaa()",5000);
}
</script>
</html>