复制代码代码如下:
<% @ Page Language = "Java" Import = "Java.util. *" Pageencoding = "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>
<adal>
<base href = "<% = baspath%>">
<Title> ma page de départ jsp 'tu.jsp' </Title>
<méta http-equiv = "pragma" contenu = "non-cache">
<meta http-equiv = "cache-control" content = "no-cache">
<méta http-equiv = "expires" content = "0">
<meta http-equiv = "keywords" contenu = "keyword1, keyword2, keyword3">
<méta http-equiv = "Description" content = "Ceci est ma page">
<style type = "text / css">
* {
marge: 0px;
rembourrage: 0px;
}
li {
Style de liste: aucun;
}
img {
bordure: 0;
}
un {
Décoration du texte: aucune;
}
#glisser {
Largeur: 800px;
hauteur: 400px;
Box-shadow: 0px 0px 5px # c1c1c1;
marge: 20px automatique;
Position: relative;
débordement: caché;
}
#slide ul {
Position: absolue;
gauche: 0px;
En haut: 0px;
hauteur: 400px;
Largeur: 11930px;
}
#slide ul li {
Largeur: 800px;
hauteur: 400px;
débordement: caché;
flottant: à gauche;
}
#slide .ico {
Largeur: 800px;
hauteur: 20px;
débordement: caché;
Texte-aligne: Centre;
Position: absolue;
gauche: 0px;
En bas: 10px;
Z-Index: 1;
}
#slide .ico a {
Affichage: bloc en ligne;
Largeur: 10px;
hauteur: 10px;
Contexte: URL (out.png) sans répétition 0px 0px;
marge: 0px 5px;
}
#slide .ico .active {
Contexte: URL (out1.png) sans répétition 0px 0px;
}
#btnleft {
Largeur: 60px;
hauteur: 400px;
gauche: 0px;
En haut: 0px;
Contexte: url () sans répétition 0px 0px;
Position: absolue;
Z-Index: 2;
}
#btnleft: Hover {
Contexte: url () sans répétition 0px 0px;
}
#btnRight {
Largeur: 60px;
hauteur: 400px;
Droite: 0px;
En haut: 0px;
Contexte: url () sans répétition 0px 0px;
Position: absolue;
Z-Index: 2;
}
#btnRight: Hover {
Contexte: url () sans répétition 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;
// alerte (base de base);
oul [0] .Style.Width = BaseWidth * ali.length + "px";
var inow = 0;
pour (var i = 0; i <abtn.length; i ++) {
abtn [i] .index = i;
abtn [i] .onclick = function () {
//alert(this.index);
//alelert(oul_0.style.left);
déplacer (this.index);
//[email protected] Lord.Classname = "Active";
}
}
obtnleft.onclick = function () {
inow ++;
//Document.Title = inow;
déplacer (inow);
}
obtnright.onclick = function () {
inow -;
document.title = inow;
déplacer (inow);
}
var curindex = 0;
var timeInterval = 1000;
setInterval (modifier, timeInterval);
Fonction Change () {
if (curindex == abtn.length) {
curindex = 0;
} autre {
déplacer (curindex);
curindex + = 1;
}
}
Fonction Move (index) {
//Document.Title = index;
if (index> ali.length-1) {
index = 0;
inow = index;
}
if (index <0) {
index = ali.length - 1;
inow = index;
}
pour (var n = 0; n <abtn.length; n ++) {
abtn [n] .classname = "";
}
abtn [index] .classname = "active";
oul [0] .style.left = -Index * BaseWidth + "PX";
// tampon (oul [0], {
// à gauche: -index * BaseWidth
//}, 8)
}
}
</cript>
</ head>
<body>
<div id = "Slide">
<a id = "btnleft" href = "javascript: void (0);" > </a>
<a id = "btnright" href = "javascript: void (0);" > </a>
<! - Lorsque changez l'image suivante: style = "gauche: - (n-1) * 800px;" ->
<ul>
<li> <img src = "images / anniu.png" /> </li>
<li> <img src = "images / zhu2.png" /> </li>
<li> <img src = "images / xiangqing5.png" /> </li>
<li> <img src = "images / 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>
</docy>
</html>