Posted in Javascript onJune 09, 2014
<%@ 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>
js换图片效果可进行定时操作
声明:登载此文出于传递更多信息之目的,并不意味着赞同其观点或证实其描述。
Reply on: @reply_date@
@reply_contents@