<div class="codetitle"> <span><a style="CURSOR: pointer" data="22079" class="copybut" id="copybut22079" onclick="doCopy('code22079')"><u>コードをコピー</u></a></span> コードは次のとおりです:</div> <div class="codebody" id="code22079"> <br><%@ page language="java" import="java.util.*" pageEncoding="ISO-8859-1"%> <br>文字列パス = request.getContextPath(); <br>StringbasePath = request.getScheme() "://" request.getServerName() ":" request.getServerPort() パス "/"; <br>%> <br><br><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <BR><html> <BR><頭> <BR><base href="<%=basePath%>"> <br><br><title>私の JSP 'tu.jsp' 開始ページ</title> <br><br><meta http-equiv="pragma" content="no-cache"> <br><meta http-equiv="cache-control" content="no-cache"> <br><meta http-equiv="expires" content="0"> <br><meta http-equiv="キーワード" content="キーワード1,キーワード2,キーワード3"> <BR><meta http-equiv="description" content="これは私のページです"> <br><style type="text/css"> <br>* { <br>マージン: 0px; <br>パディング: 0px; <br>} <br>li { <br>リストスタイル: なし; <br>} <br>img { <br>ボーダー: 0; <br>} <br>a { <br>テキスト装飾: なし; <br>} <br>#slide { <br>幅: 800px; <br>高さ: 400ピクセル; <br>ボックスシャドウ: 0px 0px 5px #c1c1c1; <br>マージン: 20px 自動; <br>位置: 相対。 <br>オーバーフロー: 非表示; <br>} <br>#slide ul { <br>位置: 絶対; <br>左: 0px; <br>トップ: 0px; <br>高さ: 400ピクセル; <br>幅: 11930px; <br>} <br>#slide ul li { <br>幅: 800px; <br>高さ: 400ピクセル; <br>オーバーフロー: 非表示; <br>フロート: 左; <br>} <br>#slide .ico { <br>幅: 800px; <br>高さ: 20px; <br>オーバーフロー: 非表示; <br>text-align: 中央; <br>位置: 絶対。 <br>左: 0px; <br>下: 10px; <br>z インデックス: 1; <br>} <br>#slide .ico a { <br>display: inline-block; <br>幅: 10px; <br>高さ:10px; <br>背景: url(out.png) 繰り返しなし 0px 0px; <br>マージン: 0px 5px; <br>} <br>#slide .ico .active { <br>background: url(out1.png) no-repeat 0px 0px; <br>} <br>#btnLeft { <br>幅: 60px; <br>高さ: 400ピクセル; <br>左: 0px; <br>トップ: 0px; <br>背景: url() 繰り返しなし 0px 0px; <br>位置: 絶対。 <br>z-インデックス: 2; <br>} <br>#btnLeft :hover { <br>background: url() no-repeat 0px 0px; <br>} <br>#btnRight { <br>幅: 60px; <br>高さ: 400ピクセル; <br>右: 0px; <br>トップ: 0px; <br>背景: url() 繰り返しなし 0px 0px; <br>位置: 絶対。 <br>z-インデックス: 2; <br>} <br>#btnRight :hover { <br>background: url() no-repeat 0px 0px; <br>} <br><br></style> <br><br><script type="text/javascript"> <br>window.onload = function() { <br>var oIco = document.getElementById("ico"); <br>var aBtn = oIco.getElementsByTagName("a"); <br>var oSlide = document.getElementById("スライド"); <br>var oUl = oSlide.getElementsByTagName("ul"); <br>var aLi = oUl[0].getElementsByTagName("li"); <br>var oBtnLeft = document.getElementById("btnLeft"); <br>var oBtnRight = document.getElementById("btnRight"); <br><br>varbaseWidth = aLi[0].offsetWidth; <br>//alert(baseWidth); <br>oUl[0].style.width = baseWidth * aLi.length "px"; <br>var iNow = 0; <br>for(var i=0;i<abtn.length>aBtn[i].index = i; <br>aBtn[i].onclick = function() { <br>//alert(this.index); <br>//alert(oUl[0].style.left); <br>move(this.index); <br>//aIco[this.index].className = "アクティブ"; <br>} <br>} <br>oBtnLeft.onclick = function() { <br>iNow ; <br>//document.title = iNow; <br>移動(iNow); <br>} <br>oBtnRight.onclick = function() { <br>iNow --; <br>document.title = iNow; <br>移動(iNow); <br>} <br><br>var curIndex = 0; <br>var timeInterval = 1000; <br>setInterval(change,timeInterval); <br>関数 change() { <br>if(curIndex == aBtn.length) { <br>curIndex =0; <br>} else { <br>move(curIndex); <br>curIndex = 1; <br>} <br><br>} <br><br>function move(index) { <br>//document.title =index; <br>if(index>aLi.length-1) { <br>index = 0; <br>iNow = インデックス; <br>} <br>if(indexindex = aLi.length - 1; <br>iNow = インデックス; <br>} <br>for(var n=0;n<abtn.length>aBtn[n].className = ""; <br>} <br>aBtn[index].className = "アクティブ"; <br>oUl[0].style.left = -index *baseWidth "px"; <br>//buffer(oUl[0],{ <br>// left: -index *baseWidth <br>// },8) <br><br>} <br>}<br></script> <br></head> <br> <br><div id="スライド"> <br><a id="btnLeft" href="javascript:void(0);" ></a> <br><a id="btnRight" href="javascript:void(0);" ></a> <br><!--次の画像を変更するとき:style="left: -(n-1)*800px;"--> <br><ul> <br><li><img src="images/anniu.png" alt="" /></li> <br><li><img src="images/zhu2.png" alt="" /></li> <br><li><img src="images/xiangqing5.png" alt="" /></li> <br><li><img src="images/wanle.png" alt="" /></li> <br> </ul> <br><div id="ico" class="ico"> <br><a class="active" href="javascript:void(0);"></a> <br><a href="javascript:void(0);"></a> <br><a href="javascript:void(0);"></a> <br><a href="javascript:void(0);"></a> <br><a href="javascript:void(0);"></a> <br><a href="javascript:void(0);"></a> <br></abtn.length></abtn.length> </div> <br> <br></body> <br></html> <br>