如何让 3 个 Div 从其自己的文件夹中每秒更改图像？答案

【问题标题】：How To Have 3 Divs Change Image Every Second From Its Own Folder?如何让 3 个 Div 从其自己的文件夹中每秒更改图像？
【发布时间】：2014-04-30 22:07:34
【问题描述】：

我想要 3 个 div 每秒更改其图像。此代码不会调用任何错误，但唯一有效的是具有 script9.js 源的第 3 个 div。为什么会这样？请帮忙...这里是：

我有 3 次潜水，其中包含来自自己文件夹的图像：

<html>
<head>
  <script type="text/javascript" src="mainjavascript.js"></script>
  <script type="text/javascript" src="script8.js"></script>
  <script type="text/javascript" src="script9.js"></script>
</head>
<body onload = "startTimer()">

  <div><img id="img" src="pictures7/1.jpg">7</div>
  <div><img id="img2" src="pictures8/1.jpg">8</div>
  <div><img id="img3" src="pictures9/1.jpg">9</div>
</body>
</html>

我有 3 个类似的 JavaScript 文件，每个 div 一个，通过 ID 获取元素，唯一的区别是“** **”符号：

 function displayImage(image) {
          document.getElementById(**"img"**).src = image;
      }

      function displayNextImage() {
          x = (x == images.length - 1) ? 0 : x + 1;
          displayImage(images[x]);           
      }

      function displayPreviousImage() {
          x = (x <= 0) ? images.length - 1 : x - 1;
          displayImage(images[x]);           
      }

      function startTimer() {
          setInterval(displayNextImage, 1000);
      }

      var images = [], x = -1;
      images[0] = **"pictures7/"** + "1.jpg";
      images[1] = **"pictures7/"** + "2.jpg";
      for(var y=2;y<4;y++){
      images[y]= **"pictures7/"** + (y+1) + ".jpg";
      }

第二格：

 function displayImage(image) {
          document.getElementById(**"img2"**).src = image;
      }

      function displayNextImage() {
          x = (x == images.length - 1) ? 0 : x + 1;
          displayImage(images[x]);           
      }

      function displayPreviousImage() {
          x = (x <= 0) ? images.length - 1 : x - 1;
          displayImage(images[x]);           
      }

      function startTimer() {
          setInterval(displayNextImage, 1000);
      }

      var images = [], x = -1;
      images[0] = **"pictures8/"** + "1.jpg";
      images[1] = **"pictures8/"** + "2.jpg";
      for(var y=2;y<4;y++){
      images[y]= **"pictures8/"** + (y+1) + ".jpg";
      }

第三区：

 function displayImage(image) {
          document.getElementById(**"img3"**).src = image;
      }

      function displayNextImage() {
          x = (x == images.length - 1) ? 0 : x + 1;
          displayImage(images[x]);           
      }

      function displayPreviousImage() {
          x = (x <= 0) ? images.length - 1 : x - 1;
          displayImage(images[x]);           
      }

      function startTimer() {
          setInterval(displayNextImage, 1000);
      }

      var images = [], x = -1;
      images[0] = **"pictures9/"** + "1.jpg";
      images[1] = **"pictures9/"** + "2.jpg";
      for(var y=2;y<4;y++){
      images[y]= **"pictures9/"** + (y+1) + ".jpg";
      }

再一次，只有 id 为“img3.jpg”的图像正在工作......它是否取消了其他代码？我应该使用 Jquery 还是其他代码？请帮帮我。

【问题讨论】：

您正在重复相同的功能。您应该使用一组函数并将它们作为变量传递图像文件夹路径。

标签： javascript php jquery asp.net html

【解决方案1】：

您多次重复相同的函数定义；给他们起不同的名字。

【讨论】：

你能举个例子吗？我已经坚持了好几个小时了。
这就是我所有的js。我怎么能不重复相同的功能？

【解决方案2】：

这把这个鞭打了这只是循环通过一个数组，如果它试图比数组更远，那么它会重置到第一个图像

var images = ['create an array of pictures']
var currentimage = 0;

function loop() {
 currentimage++;

if(currentimage > images.length){
 currentimage = 0;
}
 setimage();
}

function setImage() {
    document.getElementById('image').src = images[currentImage];
}

setInterval(loop, 1000);

【讨论】：

【解决方案3】：

您在三个文件中声明了相同的函数。但是，函数本身都是在全局范围内创建的，因此每个 JS 文件都会覆盖前一个。您可以使用 Chrome 中的开发者控制台验证这一点。

您希望保持代码干燥 - 不要重复自己。因此，请尝试仅使用一个在页面加载时运行的函数来重写它，并将剩余的三个文件合并为一个。

【讨论】：

我如何使这些功能不同，以便它可以工作。我是新手，我有点困惑。