css+div动态图片切换

来源：互联网发布：后现代主义平面知乎编辑：程序博客网时间：2024/05/18 01:08

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">

<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 onload="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)" onclick="aaa()">1</a>
</span>
<span id="span2" class="a_2">
<a href="javascript:void(0)" onclick="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>

阅读全文

0 0