复制代码代码如下 :
<%@ page language = "java"import = "java.util.*"pageencoding = "iso-8859-1"%>
<%
문자열 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> 내 jsp 'tu.jsp'시작 페이지 </title>
<meta http-equiv = "pragma"content = "no-cache">
<meta http-equiv = "캐시 제어"content = "no-cache">
<meta http-equiv = "만료"내용 = "0">
<meta http-equiv = "keywords"content = "keyword1, keyword2, keyword3">
<meta http-equiv = "description"content = "이것은 내 페이지입니다">
<스타일 유형 = "텍스트/CSS">
* {
여백 : 0px;
패딩 : 0px;
}
Li {
목록 스타일 : 없음;
}
img {
국경 : 0;
}
A {
텍스트 결정 : 없음;
}
#Slide {
너비 : 800px;
높이 : 400px;
Box-Shadow : 0px 0px 5px #c1c1c1;
마진 : 20px 자동;
위치 : 상대;
오버플로 : 숨겨진;
}
#Slide ul {
위치 : 절대;
왼쪽 : 0px;
상단 : 0px;
높이 : 400px;
너비 : 11930px;
}
#slide ul li {
너비 : 800px;
높이 : 400px;
오버플로 : 숨겨진;
플로트 : 왼쪽;
}
#Slide .ICO {
너비 : 800px;
높이 : 20px;
오버플로 : 숨겨진;
텍스트 정렬 : 센터;
위치 : 절대;
왼쪽 : 0px;
하단 : 10px;
z- 인덱스 : 1;
}
#slide .ico a {
디스플레이 : 인라인 블록;
너비 : 10px;
높이 : 10px;
배경 : URL (out.png) no-repeat 0px 0px;
마진 : 0px 5px;
}
#Slide .ICO .Active {
배경 : URL (out1.png) no-Repeat 0px 0px;
}
#btnleft {
너비 : 60px;
높이 : 400px;
왼쪽 : 0px;
상단 : 0px;
배경 : url () no-Repeat 0px 0px;
위치 : 절대;
z- 인덱스 : 2;
}
#btnleft : 호버 {
배경 : url () no-Repeat 0px 0px;
}
#btnright {
너비 : 60px;
높이 : 400px;
오른쪽 : 0px;
상단 : 0px;
배경 : url () no-Repeat 0px 0px;
위치 : 절대;
z- 인덱스 : 2;
}
#btnright : 호버 {
배경 : url () no-Repeat 0px 0px;
}
</스타일>
<script type = "text/javaScript">
Window.onload = function () {
var oico = document.getElementById ( "ico");
var abtn = oico.getElementsByTagName ( "a");
var oslide = document.getElementById ( "슬라이드");
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;
// Alert (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(this.index);
//Alert(oul]] .Style.left);
이동 (this.index);
//aico] this.index] .classname = "active";
}
}
obtnleft.onclick = function () {
inow ++;
//document.title = inow;
이동 (inow);
}
obtnright.onclick = function () {
inow-;
문서 .title = inow;
이동 (inow);
}
var curindex = 0;
var timeinterval = 1000;
SetInterval (Change, TimeInterval);
함수 변경 () {
if (curindex == abtn.length) {
curindex = 0;
} 또 다른 {
이동 (curindex);
curindex += 1;
}
}
함수 이동 (색인) {
//document.title = index;
if (index> ali.length-1) {
색인 = 0;
inow = index;
}
if (index <0) {
색인 = 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";
// 버퍼 (oul [0], {
// 왼쪽 : -index * basewidth
//}, 8)
}
}
</스크립트>
</head>
<body>
<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>