Javascript 如何让3个div每秒从自己的文件夹中更改图像？_Javascript_Php_Jquery_Asp.net_Html

Javascript 如何让3个div每秒从自己的文件夹中更改图像？

javascript php jquery asp.net html

Javascript 如何让3个div每秒从自己的文件夹中更改图像？,javascript,php,jquery,asp.net,html,Javascript,Php,Jquery,Asp.net,Html,我希望有3个div每秒更改一次它的映像。这段代码不调用任何错误，但唯一有效的是源代码为script9.js的第3个div。为什么会这样？请帮忙。。。这是：我有3次潜水，其中包含来自自己文件夹的图像： <html> <head> <script type="text/javascript" src="mainjavascript.js"></script> <script type="text/javascript" src="scr

我希望有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>


7.
8.
9

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

函数显示图像（图像）{
document.getElementById（**“img”**）。src=image；
}
函数displayNextImage（）{
x=（x==images.length-1）？0:x+1；
显示图像（图像[x]）；
}
函数displayPreviousImage（）{
x=（x您多次重复相同的函数定义；给它们不同的名称。
您在三个文件中声明了相同的函数。但是，函数本身都是在全局范围内创建的，因此每个JS文件都会覆盖上一个文件。您可以使用Chrome中的开发者控制台验证这一点
您希望保持代码干燥-不要重复自己的代码。因此，请尝试仅使用在页面加载上运行的一个函数重写此代码，并将剩余的三个文件合并为一个文件。
这会使此文件上升，这只会在数组中循环，如果它试图超出数组，则会重置为第一个图像
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);

你能给我举个例子吗？我已经在这个问题上纠缠了好几个小时了。这就是我所有的js。我怎么能不重复相同的功能呢？我如何使这些功能不同，这样它才能工作。我对此很陌生。我有点困惑。你在重复相同的功能。你应该使用一组函数，并将它们作为变量传递给图像文件夹路径。
 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";
      }

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);