复制代码代码如下::
<%@ page Language = "java" import = "java.util.*" pageCoding = "ISO-8859-1"%>
<%
String path = request.getContextPath ();
String basepath = request.getScheme ()+": //"+request.getSerVername ()+":"+request.getServerport ()+path+"/";
%>
<! DocType html public "-// w3c // dtd html 4.01 transitional // en">
<html>
<kopf>
<Basis href = "<%= Basepath%>">
<title> My JSP 'Tu.jsp' Startseite </title>
<meta http-äquiv = "pragma" content = "no-cache">
<meta http-äquiv = "cache-control" content = "no-cache">
<meta http-äquiv = "abläuft" content = "0">
<meta http-equiv = "keywords" content = "keyword1, keyword2, keyword3">
<meta http-äquiv = "Beschreibung" content = "Dies ist meine Seite">
<style type = "text/css">
* {{
Rand: 0px;
Polsterung: 0px;
}
li {
Listenstil: Keine;
}
img {
Grenze: 0;
}
A {
Textdekoration: Keine;
}
#gleiten {
Breite: 800px;
Höhe: 400px;
Box-Shadow: 0PX 0PX 5PX #C1C1C1;
Rand: 20px Auto;
Position: Relativ;
Überlauf: versteckt;
}
#slide ul {
Position: absolut;
links: 0px;
Oben: 0px;
Höhe: 400px;
Breite: 11930px;
}
#slide ul li {
Breite: 800px;
Höhe: 400px;
Überlauf: versteckt;
float: links;
}
#slide .ico {
Breite: 800px;
Höhe: 20px;
Überlauf: versteckt;
Text-Align: Mitte;
Position: absolut;
links: 0px;
unten: 10px;
Z-Index: 1;
}
#slide .ico a {
Anzeige: Inline-Block;
Breite: 10px;
Höhe: 10px;
Hintergrund: URL (out.png) No-Repeat 0px 0px;
Rand: 0px 5px;
}
#slide .ico .Active {
Hintergrund: URL (out1.png) No-Repeat 0px 0px;
}
#BTNLEFT {
Breite: 60px;
Höhe: 400px;
links: 0px;
Oben: 0px;
Hintergrund: URL () No-Repeat 0px 0px;
Position: absolut;
Z-Index: 2;
}
#BTNLEFT: Hover {
Hintergrund: URL () No-Repeat 0px 0px;
}
#btnright {
Breite: 60px;
Höhe: 400px;
Rechts: 0px;
Oben: 0px;
Hintergrund: URL () No-Repeat 0px 0px;
Position: absolut;
Z-Index: 2;
}
#BTNRIGHT: Hover {
Hintergrund: URL () No-Repeat 0px 0px;
}
</style>
<script type = "text/javaScript">
window.onload = function () {
var oico = document.getElementById ("ICO");
var abtn = oico.getElementsByTagName ("a");
var oslide = document.getElementById ("Slide");
var Oul = oslide.getElementsByTagName ("ul");
var ali = OUl [0] .GetElementsByTagName ("li");
var obtnleft = document.getElementById ("btnleft");
var obtnright = document.getElementById ("Btnright");
var basewidth = ali [0] .Offsetwidth;
// alarm (Basisbreite);
OUL [0] .Style.Width = Basewidth * ali.Length + "px";
var Inow = 0;
für (var i = 0; i <abtn.length; i ++) {
Abtn [i] .Index = i;
Abtn [i] .onclick = function () {
//alert(this.index);
//alert(oul -0..Style.Left);
Bewegung (this.index);
//aico Appan .Index weibliche. ClassName = "Active";
}
}
obtnleft.onclick = function () {
Inow ++;
//document.title = Inow;
bewegen (Inow);
}
obtnright.onclick = function () {
Inow -;
document.title = Inow;
bewegen (Inow);
}
var curindex = 0;
var timeInterval = 1000;
setInterval (Änderung, Zeitinterval);
function change () {
if (curindex == abtn.length) {
curindex = 0;
} anders {
bewegen (curindex);
Curindex += 1;
}
}
Funktion move (index) {
//document.title = index;
if (index> ali.length-1) {
Index = 0;
Inow = index;
}
if (index <0) {
index = ali.length - 1;
Inow = index;
}
für (var n = 0; n <abtn.length; n ++) {
Abtn [n] .ClassName = "";
}
ABTN [INDEX] .CLASSNAME = "Active";
OUL [0] .Style.Left = -Idex * Basewidth + "PX";
// Buffer (OUL [0], {
// links: -index * Basebreite
//}, 8)
}
}
</script>
</head>
<body>
<div id = "Slide">
<a id = "btnleft" href = "javaScript: void (0);" > </a>
<a id = "btnright" href = "JavaScript: void (0);" > </a>
<!-Wenn Sie das nächste Bild ändern: style = "links:-(n-1)*800px;"->
<ul>
<li> <img src = "bilder/anniu.png"/> </li>
<li> <img Src = "Bilder/zhu2.png"/> </li>
<li> <img src = "Bilder/xiangqing5.png"/> </li>
<li> <img src = "bilder/wanle.png"/> </li>
</ul>
<div id = "ico">
<a href = "JavaScript: void (0);"> </a>
<a href = "JavaScript: void (0);"> </a>
<a href = "JavaScript: void (0);"> </a>
<a href = "JavaScript: void (0);"> </a>
<a href = "JavaScript: void (0);"> </a>
<a href = "JavaScript: void (0);"> </a>
</div>
</div>
</body>
</html>