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

String path = request.getContextPath();

String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";

%>

My JSP 'tu.jsp' starting page

* {

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;

}

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[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[n].className = "";

}

aBtn[index].className = "active";

oUl[0].style.left = -index * baseWidth + "px";

//buffer(oUl[0],{

// left: -index * baseWidth

// },8)

}

}

• 
• 
• 
•