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

复制代码 代码如下: 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 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) } }

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

Articles Liés