JavaScript js 動態更換、播放圖片特效

來源:互聯網
上載者:User

<!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 />

相關文章

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.