这段代码有什么问题？使用纯javascript切换图像

时间：2017-06-23 13:21:54

标签： javascript html css

我一直试图在网站上使用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 个答案:

答案 0 :(得分：1)

您忘记在代码中添加<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>

相关问题
最新问题