Javascript 在两个单独的div中从一个图像切换到下一个图像

我试图在我的网页上创建两个具有旋转图像的div，这些图像在一定时间后会更改为另一个图像，并且有3个图像要显示。目前，我正试图使用下面的代码来了解这项工作的机制，但尽管它很简单，但我无法让它工作。代码与我之前使用的代码相同，但是这次它不想工作。我是去年做的，几年前就做了，我完全忘记了研究是如何起作用的

我的代码如下。如果此问题是特定于现场的，我还包括了一个问题，一旦问题得到回答，我将删除该问题两个div是红色和黄色框。

JAVASCRIPT

var旋转器=[
{id:'advert1'，图像：['http://www.w3schools.com/html/html5.gif', 'http://www.w3schools.com/html/pic_mountain.jpg', 'http://www.w3schools.com/html/pic_graph.png']，已选择索引：0}，
{id:'advert2'，图像：['http://www.w3schools.com/css/klematis_big.jpg', 'http://www.w3schools.com/css/klematis2_big.jpg', 'http://www.w3schools.com/css/klematis3_big.jpg']，已选择索引：0}
];
var updateImages=函数（）{
对于（var i=0；i=rotator.images.length）{
rotator.selectedIndex=0；
}
document.getElementById（rotator.id）.src=rotator.images[rotator.selectedIndex]；
}
};
var定时器=设置间隔（更新图像，1000）；

HTML

---

查看Google Chrome中的代码，我在控制台中看到以下错误：

未捕获引用错误：$未定义| new.html:204

您似乎忘记了在html页面中包含jQuery

您可以从以下页面上的CDN中获取它：

另一个问题是，您试图更新img，但您的DOM元素是div。 应替换以下代码：

    <div id="main">
      <div id="advert1"></div>
      <div id="advert2"></div>
    </div>

与：

---

javascript在您编写的地方执行，如果在元素之前编写，则该元素不存在

---

您可以将代码附加到文档的onReady事件或将代码放在元素之后。

您正在尝试设置div src。您需要在每个div中有一个image（img）元素，然后设置image src

<div id="main">
  <div>
    <img id="advert1" alt="" src.../>
  </div>
  <div>
    <img id="advert2" alt="" src.../>
  </div>    
</div>

---

另一个选项是使用style属性或class属性设置div背景图像（两者都使用CSS集和JavaScript）。

brilliant，谢谢你，我使用哪个jquery重要吗？我更新了答案以更正另一个错误。关于jQuery版本，如果您想支持IE<9，应该使用jQuery1.x，否则可以使用jQuery2.x

    <div id="main">
      <div id="advert1"></div>
      <div id="advert2"></div>
    </div>

    <div id="main">
      <img src="" id="advert1" />
      <img src="" id="advert2" />
    </div>

<div id="main">
  <div>
    <img id="advert1" alt="" src.../>
  </div>
  <div>
    <img id="advert2" alt="" src.../>
  </div>    
</div>