复制代码代码如下:
<%@ 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>
<голова>
<base href = "<%= basepath%>">
<title> my jsp 'tu.jsp' Начальная страница </title>
<meta http-equiv = "pragma" content = "no-cache">
<meta http-equiv = "cache-control" content = "no-cache">
<meta http-equiv = "истекает" content = "0">
<meta http-equiv = "Keywords" content = "Keyword1, Keyword2, Keyword3">
<meta http-equiv = "description" content = "Это моя страница">
<стиль типа = "text/css">
* {
поля: 0px;
Заполнение: 0px;
}
li {
Список стиля: нет;
}
img {
граница: 0;
}
a {
Текстовое декорация: нет;
}
#slide {
Ширина: 800px;
Высота: 400px;
Box-Shadow: 0px 0px 5px #c1c1c1;
Маржа: 20px Auto;
позиция: относительно;
переполнение: скрыто;
}
#slide ul {
позиция: абсолютно;
слева: 0px;
Верх: 0px;
Высота: 400px;
Ширина: 11930px;
}
#slide ul li {
Ширина: 800px;
Высота: 400px;
переполнение: скрыто;
Плавание: осталось;
}
#slide .ico {
Ширина: 800px;
Высота: 20px;
переполнение: скрыто;
Текст-альбом: Центр;
позиция: абсолютно;
слева: 0px;
Внизу: 10px;
z-index: 1;
}
#slide .ico a {
дисплей: встроенный блок;
Ширина: 10px;
Высота: 10px;
Фон: url (out.png) без повторного перепонки 0px 0px;
Покрас: 0px 5px;
}
#slide .ico .active {
Фон: URL (out1.png) без повторного перепонки 0px 0px;
}
#btnleft {
Ширина: 60px;
Высота: 400px;
слева: 0px;
Верх: 0px;
Фон: url () no-repeat 0px 0px;
позиция: абсолютно;
Z-Index: 2;
}
#btnleft: Hover {
Фон: url () no-repeat 0px 0px;
}
#btnright {
Ширина: 60px;
Высота: 400px;
Справа: 0px;
Верх: 0px;
Фон: url () no-repeat 0px 0px;
позиция: абсолютно;
Z-Index: 2;
}
#btnright: Hover {
Фон: 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 oTnleft = document.getElementById ("btnleft");
var oTnright = document.getElementById ("btnright");
var basewidth = ali [0] .OffSetWidth;
// предупреждение (Basewidth);
oul [0] .style.width = basewidth * ali.length + "px";
var inow = 0;
for (var i = 0; i <abtn.length; i ++) {
abtn [i] .index = i;
abtn [i] .onclick = function () {
//Alert(Tis.index);
//Alert(oul=n.Style.left);
Перемещение (this.index);
//AICO= THIS.INDEXY.CLASSNAME = "Active";
}
}
oTnleft.onclick = function () {
inow ++;
//document.title = inow;
двигаться (iNow);
}
oTnright.onclick = function () {
iNow -;
document.title = inow;
двигаться (iNow);
}
var curindex = 0;
var TimeInterval = 1000;
SetInterval (изменение, TimeInterval);
function изменение () {
if (curindex == abtn.length) {
curindex = 0;
} еще {
Движение (Curindex);
curindex += 1;
}
}
функция перемещение (index) {
//document.title = index;
if (index> ali.length-1) {
index = 0;
inow = index;
}
if (index <0) {
index = ali.length - 1;
inow = index;
}
for (var n = 0; n <abtn.length; n ++) {
abtn [n] .classname = "";
}
abtn [index] .classname = "active";
oul [0] .style.left = -index * basewidth + "px";
// buffer (oul [0], {
// слева: -index * basewidth
//}, 8)
}
}
</script>
</head>
<тело>
<div id = "слайд">
<a id = "btnleft" href = "javascript: void (0);" > </a>
<a id = "btnright" href = "javascript: void (0);" > </a>
<!-Когда изменение следующее изображение: style = "слева:-(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>
</body>
</html>