js换图片效果可进行定时操作

前端技术 2023/09/06 JavaScript
复制代码 代码如下:

<%@ 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>
<head>
<base href=\"<%=basePath%>\">

<title>My JSP \'tu.jsp\' starting page</title>

<meta http-equiv=\"pragma\" content=\"no-cache\">
<meta http-equiv=\"cache-control\" content=\"no-cache\">
<meta http-equiv=\"expires\" content=\"0\">
<meta http-equiv=\"keywords\" content=\"keyword1,keyword2,keyword3\">
<meta http-equiv=\"description\" content=\"This is my page\">
<style type=\"text/css\">
* {
margin: 0px;
padding: 0px;
}
li {
list-style: none;
}
img {
border: 0;
}
a {
text-decoration: none;
}
#slide {
width: 800px;
height: 400px;
box-shadow: 0px 0px 5px #c1c1c1;
margin: 20px auto;
position: relative;
overflow: hidden;
}
#slide ul {
position: absolute;
left: 0px;
top: 0px;
height: 400px;
width: 11930px;
}
#slide ul li {
width: 800px;
height: 400px;
overflow: hidden;
float: left;
}
#slide .ico {
width: 800px;
height: 20px;
overflow: hidden;
text-align: center;
position: absolute;
left: 0px;
bottom: 10px;
z-index: 1;
}
#slide .ico a {
display: inline-block;
width: 10px;
height:10px;
background: url(out.png) no-repeat 0px 0px;
margin: 0px 5px;
}
#slide .ico .active {
background: url(out1.png) no-repeat 0px 0px;
}
#btnLeft {
width: 60px;
height: 400px;
left: 0px;
top: 0px;
background: url() no-repeat 0px 0px;
position: absolute;
z-index: 2;
}
#btnLeft :hover {
background: url() no-repeat 0px 0px;
}
#btnRight {
width: 60px;
height: 400px;
right: 0px;
top: 0px;
background: url() no-repeat 0px 0px;
position: absolute;
z-index: 2;
}
#btnRight :hover {
background: 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;
//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[0].style.left);
move(this.index);
//aIco[this.index].className = \"active\";
}
}
oBtnLeft.onclick = function() {
iNow ++;
//document.title = iNow;
move(iNow);
}
oBtnRight.onclick = function() {
iNow --;
document.title = iNow;
move(iNow);
}

var curIndex = 0;
var timeInterval = 1000;
setInterval(change,timeInterval);
function change() {
if(curIndex == aBtn.length) {
curIndex =0;
} else {
move(curIndex);
curIndex += 1;
}

}

function move(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],{
// left: -index * baseWidth
// },8)

}
}
</script>
</head>
<body>
<div id=\"slide\">
<a id=\"btnLeft\" href=\"javascript:void(0);\" ></a>
<a id=\"btnRight\" href=\"javascript:void(0);\" ></a>
<!--when change next image:style=\"left: -(n-1)*800px;\"-->
<ul>
<li><img src=\"images/anniu.png\" alt=\"\" /></li>
<li><img src=\"images/zhu2.png\" alt=\"\" /></li>
<li><img src=\"images/xiangqing5.png\" alt=\"\" /></li>
<li><img src=\"images/wanle.png\" alt=\"\" /></li>
</ul>
<div id=\"ico\" class=\"ico\">
<a class=\"active\" 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>

本文地址：https://www.stayed.cn/item/15031

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请 联系我

我的博客

人生若只如初见，何事秋风悲画扇。

我的标签

随笔档案