此代码有什么问题？ 使用纯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.