JavaScript js 动态更换、播放图片特效

来源：互联网发布：怎样电脑注册淘宝小号编辑：程序博客网时间：2024/06/05 12:58

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