此代碼有什么問題？ 使用純JavaScript切換圖像
[英]What is wrong with this code? Switching images with pure javascript
問題描述
我一直在嘗試使用網站上的javascript在計時器上的圖像之間進行切換，但是當我使用純JavaScript將其帶到網站上時，它似乎會中斷，但是在JSFiddle上它似乎可以正常工作。 這是網站上的破損代碼。
document.addEventListener("DOMContentLoaded", function() { var timer; var sec = 1; var timeField = document.getElementById("time"); var photo = document.getElementById("html_photo"); timeField.innerHTML = "1"; var photo_current = ["http://www.drodd.com/images15/1-15.jpg","http://www.drodd.com/images15/2-23.jpg","http://www.drodd.com/images15/3-12.jpg"]; function update() { sec++; timeField.innerHTML = sec; if (sec == 30) sec = 0; } function changeImage() { if (sec == 1) { photo.src = photo_current[0]; } else if (sec == 3) { photo.src = photo_current[1]; } else if (sec == 5) { photo.src = photo_current[2]; } } function start() { timer = setInterval(function() { update() changeImage() }, 1000); } start(); });
body { background-color: #999999; overflow-x: hidden; } @font-face { font-family: HelveticaNeue; src: url(fonts/HelveticaNeue.ttf) format("truetype"); } @font-face { font-family: HelveticaNeue_Light; src: url(fonts/HelveticaNeue_Light.ttf) format("truetype"); } @font-face { font-family: HelveticaNeue; src: url(fonts/HelveticaNeue.ttf) format("truetype"); } ul { list-style-type: none; margin: 0; padding: 0; overflow: hidden; background-color: #333; } li { float: left; } .navigation-bar { position: static; width: 100vw; z-index: 1; } #navbar { float: right; } #navbar li a { float: right; } p { color: #f2f2f2; } #navbar a { font-family: HelveticaNeue; font-size: 72px; padding: 70px 100px; font-size: 14px; font-weight: 800; letter-spacing: -.01em; font-family: "Helvetica Neue"; color: #fff; text-decoration: none; white-space: nowrap; outline-offset: -7px } li a { display: block; color: white; text-align: center; padding: 14px 16px; text-decoration: none; } li a:hover { background-color: #111; color: } li a:active { background-color: #f9eb59; color: #303030; } #homepage-photo { width:100%; height:83.5%; } #fit-page { position:absolute; z-index:0; left:0; top:0; width:100%; height:100%; } #test { display: block; background-color: green; } #logo-nav { height: 100%; width: 50%; }
<!DOCTYPE html> <html> <head> <title>TUMBLEWEED</title> <link rel="shortcut icon" type="image/x-icon" href="images/logo_icon_transparent.ico" /> <link rel="stylesheet" type="text/css" href="code/css/style.css"> <link rel="stylesheet" type="text/css" href="code/css/homepage.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script> <script src="js/js.js"></script> <style> <div class="" style='position:absolute;z-index:0;left:0;top:0;width:100%;height:100%;'> </style> </head> <body> <div id="fit-page"> <ul> <li><a id="active" href=""> <img src="images/logo_transparent.png" style="height: 100%; width: 50%;"> </a> </li> <li id="navbar" style="float: right;"><a href="code/Popular.html">Popular</a></li> <li id="navbar" style="float: right;"><a href="/Budget.html">Budget</a></li> <li id="navbar" style="float: right;"><a href="/Unique.html">Unique</a></li> </ul> <!-- <div class="image-parent"> <img src="http://www.drodd.com/images15/1-22.png" id="one" style="z-index: 3"> <figure style="background-image: http://www.drodd.com/images15/3-12.jpg; width: 100%; height: 100%; color: white; background-color: white; z-index: 1"></figure> <img src="http://www.drodd.com/images15/2-23.jpg" id="two" style="z-index: 2"> </div> --> <img src="images/Homepage/Apple.jpg" id="html_photo" alt='[]' /> </div> </body> </html>
這是一個本機網站，因此顯然本機鏈接不起作用，因此請忽略它們。
我需要純JavaScript答案，所以請不要發布jQuery答案。
謝謝
1 個解決方案
解決方案1
1 已采納 2017-06-23 13:26:19
您忘記在代碼中添加<div id="time"></div> 。 選中它可能對您有幫助。
document.addEventListener("DOMContentLoaded", function() { var timer; var sec = 1; var timeField = document.getElementById("time"); var photo = document.getElementById("html_photo"); timeField.innerHTML = "1"; var photo_current = ["http://www.drodd.com/images15/1-15.jpg","http://www.drodd.com/images15/2-23.jpg","http://www.drodd.com/images15/3-12.jpg"]; function update() { sec++; timeField.innerHTML = sec; if (sec == 30) sec = 0; } function changeImage() { if (sec == 1) { photo.src = photo_current[0]; } else if (sec == 3) { photo.src = photo_current[1]; } else if (sec == 5) { photo.src = photo_current[2]; } } function start() { timer = setInterval(function() { update() changeImage() }, 1000); } start(); });
body { background-color: #999999; overflow-x: hidden; } @font-face { font-family: HelveticaNeue; src: url(fonts/HelveticaNeue.ttf) format("truetype"); } @font-face { font-family: HelveticaNeue_Light; src: url(fonts/HelveticaNeue_Light.ttf) format("truetype"); } @font-face { font-family: HelveticaNeue; src: url(fonts/HelveticaNeue.ttf) format("truetype"); } ul { list-style-type: none; margin: 0; padding: 0; overflow: hidden; background-color: #333; } li { float: left; } .navigation-bar { position: static; width: 100vw; z-index: 1; } #navbar { float: right; } #navbar li a { float: right; } p { color: #f2f2f2; } #navbar a { font-family: HelveticaNeue; font-size: 72px; padding: 70px 100px; font-size: 14px; font-weight: 800; letter-spacing: -.01em; font-family: "Helvetica Neue"; color: #fff; text-decoration: none; white-space: nowrap; outline-offset: -7px } li a { display: block; color: white; text-align: center; padding: 14px 16px; text-decoration: none; } li a:hover { background-color: #111; color: } li a:active { background-color: #f9eb59; color: #303030; } #homepage-photo { width:100%; height:83.5%; } #fit-page { position:absolute; z-index:0; left:0; top:0; width:100%; height:100%; } #test { display: block; background-color: green; } #logo-nav { height: 100%; width: 50%; }
<!DOCTYPE html> <html> <head> <title>TUMBLEWEED</title> <link rel="shortcut icon" type="image/x-icon" href="images/logo_icon_transparent.ico" /> <link rel="stylesheet" type="text/css" href="code/css/style.css"> <link rel="stylesheet" type="text/css" href="code/css/homepage.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script> <script src="js/js.js"></script> <style> <div class="" style='position:absolute;z-index:0;left:0;top:0;width:100%;height:100%;'> </style> </head> <body> <div id="fit-page"> <ul> <li><a id="active" href=""> <img src="images/logo_transparent.png" style="height: 100%; width: 50%;"> </a> </li> <li id="navbar" style="float: right;"><a href="code/Popular.html">Popular</a></li> <li id="navbar" style="float: right;"><a href="/Budget.html">Budget</a></li> <li id="navbar" style="float: right;"><a href="/Unique.html">Unique</a></li> </ul> <div id="time"></div> <!-- <div class="image-parent"> <img src="http://www.drodd.com/images15/1-22.png" id="one" style="z-index: 3"> <figure style="background-image: http://www.drodd.com/images15/3-12.jpg; width: 100%; height: 100%; color: white; background-color: white; z-index: 1"></figure> <img src="http://www.drodd.com/images15/2-23.jpg" id="two" style="z-index: 2"> </div> --> <img src="images/Homepage/Apple.jpg" id="html_photo" alt='[]' /> </div> </body> </html>
內聯Javascript代碼和純Javascript代碼之間的最佳性能是什么？
[英]What is the best performance between inline Javascript code and pure Javascript code?
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.