stackoom
  简体   繁体   中英

What is wrong with this code? Switching images with pure javascript

 原文  2017-06-23 13:21:54  0   1    javascript/ html/ css

Question

I've been trying to switch between images on a timer with javascript on a website however it seems to break as soon as I bring it on to the website with pure javascript but on JSFiddle it seems to work fine. Here is the broken code on the website. 

 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>

This is the a native website so obviously the native links will not work so please ignore them.

I need an answer in pure javascript so please do not post jQuery answers.

Thanks

1 answers

solution1
 1 ACCPTED  2017-06-23 13:26:19

You forget to add <div id="time"></div> in your code. Check this it may help you. 

 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>

暂无
暂无

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

Related Question What is wrong with this JavaScript code? Javascript: What is wrong with this code? What is wrong with this javascript code What is wrong in this javascript code? What's the equivalent of this code in pure/native javascript? What is the best performance between inline Javascript code and pure Javascript code? Downsizing images in pure Javascript What is wrong with my JavaScript code What's wrong with this javascript code? What is wrong with my code (in Javascript)?
Related Tags
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM