登 录
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><br /> <html><br /> <head><br /> <title>tab.html</title><br /> <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"><br /> <meta http-equiv="description" content="this is my page"><br /> <meta http-equiv="content-type" content="text/html; charset=UTF-8"><br /> <style type="text/css"><br /> .subject {<br /> border: 1px solid black;<br /> width: 200px;<br /> height: 200px;<br /> }<br /> </style><br /> <script type="text/javascript"><br /> var imgAry = new Array();<br /> imgAry.push("http://hiphotos.baidu.com/%BA%EC%C2%A5%C7%E9%C3%CE/pic/item/ed9e7094af4f2677d1135e93.jpg");<br /> imgAry.push("http://hiphotos.baidu.com/%BA%EC%C2%A5%C7%E9%C3%CE/pic/item/2f78156fb7c8dae681cb4a93.jpg");<br /> imgAry.push("http://hiphotos.baidu.com/%BA%EC%C2%A5%C7%E9%C3%CE/pic/item/cf4013658b43f3ccf7365493.jpg");<br /> imgAry.push("http://hiphotos.baidu.com/%BA%EC%C2%A5%C7%E9%C3%CE/pic/item/2f78156fb7c8dae681cb4a93.jpg");<br /> imgAry.push("http://hiphotos.baidu.com/%BA%EC%C2%A5%C7%E9%C3%CE/pic/item/ed9e7094af1f2677d0135e23.jpg");</p> <p> window.onload = function () {<br /> var oBox = document.getElementById("subjectBox");<br /> var oShowId = document.getElementById("showId").value;<br /> var subjectHtml = "";<br /> for (var i = 1; i <= 4; i++) {<br /> if (i == oShowId) {<br /> subjectHtml += "<div id ='div_" + i + "' name='showDiv' style='display: block;' class='subject'>" + i + "<img src='" + imgAry[i-1] + "'/></div>"<br /> } else {<br /> subjectHtml += "<div id ='div_" + i + "' name='showDiv' style='display: none;' class='subject'>" + i + "<img src='" + imgAry[i-1] + "'/></div>"<br /> }<br /> }<br /> oBox.innerHTML = subjectHtml;<br /> showSubject2("next");<br /> };</p> <p> function setHide() {<br /> var allDiv = document.getElementsByName("showDiv");<br /> for (var i = 0; i < allDiv.length; i++) {<br /> if (allDiv[i].style.display != "none") {<br /> allDiv[i].style.display = "none";<br /> }<br /> }<br /> }</p> <p> //方法一：<br /> function showSubject(flag) {<br /> var oShowId = document.getElementById("showId").value;<br /> var allDiv = document.getElementsByName("showDiv");<br /> var len = allDiv.length;<br /> //alert(oShowId + ":" + len);<br /> setHide();//隐藏所有div<br /> if (flag == "next") {<br /> oShowId = eval(oShowId) + 1;<br /> if (oShowId > len) {<br /> oShowId = 1;<br /> }<br /> document.getElementById("div_" + oShowId).style.display = "block";<br /> } else {<br /> oShowId = eval(oShowId) - 1;<br /> if (oShowId < 1) {<br /> oShowId = len;<br /> }<br /> document.getElementById("div_" + oShowId).style.display = "block";<br /> }<br /> document.getElementById("showId").value = oShowId;<br /> }</p> <p> //方法二：<br /> function showSubject2(flag) {<br /> var allDiv = document.getElementsByName("showDiv");<br /> for (var i = 0, len = allDiv.length; i < len; i++) {<br /> if (allDiv[i].style.display == "block") {<br /> allDiv[i].style.display = "none";<br /> if (flag == "next") {<br /> if (i < len) {<br /> i += 1;<br /> }<br /> if (i >= len) {<br /> i = 0;<br /> }<br /> } else {<br /> if (i > 0) {<br /> i -= 1;<br /> }<br /> if (i <= 0) {<br /> i = len - 1;<br /> }<br /> }<br /> allDiv[i].style.display = "block";<br /> break;<br /> }<br /> }<br /> setTimeout("showSubject2('next')", 1000);//动态更换图片<br /> }<br /> </script><br /> </head></p> <p> <body><br /> 方法1：<br /> <input type="button" value="上" onclick="showSubject('prev')" /><br /> <input type="button" value="下" onclick="showSubject('next')" /><br /> <input type="hidden" id="showId" value="1" /><br /> <br /><br /> 方法2：<br /> <input type="button" value="上" onclick="showSubject2('prev')" /><br /> <input type="button" value="下" onclick="showSubject2('next')" /><br /> <div id="subjectBox"><br /> </div><br /> </body><br /> </html><br />
抱歉!评论已关闭.