在 2 个单独的 div 中将图像从一个更改为下一个

Question

我正在尝试在我的网页上创建两个带有旋转图像的 div，这些 div 在一定秒数后变为另一个图像，并且有 3 个图像要显示。目前，我只是试图使用下面的代码来了解这项工作的机制，但尽管它很简单，但我无法让它工作。该代码与我之前使用的相同，但是这次它不想工作。几年前我最后做了，我完全忘记了如何做，研究也没有帮助。

我的代码如下。如果这个问题是特定于站点的，我还包含了一个 livelink HERE，一旦问题得到解答，我将删除它。 这两个 DIVS 是红色和黄色框。

JavaScript

var rotators = [
{ id: 'advert1', images: ['http://www.w3schools.com/html/html5.gif', 'http://www.w3schools.com/html/pic_mountain.jpg', 'http://www.w3schools.com/html/pic_graph.png'], selectedIndex: 0 },
{ id: 'advert2', images: ['http://www.w3schools.com/css/klematis_big.jpg', 'http://www.w3schools.com/css/klematis2_big.jpg', 'http://www.w3schools.com/css/klematis3_big.jpg'], selectedIndex: 0 }
];

var updateImages = function() {
for (var i=0; i < rotators.length; i++) {
var rotator = rotators[i];
rotator.selectedIndex++;
if (rotator.selectedIndex >= rotator.images.length) {
    rotator.selectedIndex = 0;
}
document.getElementById(rotator.id).src = rotator.images[rotator.selectedIndex];
}
};
var timer = setInterval(updateImages, 1000);
         </script>

HTML

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

Answer 1

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

Uncaught ReferenceError: $ is not defined | new.html:204

您似乎忘记在 html 页面中添加 jQuery。

您可以从以下页面的 CDN 获取它：http://code.jquery.com/

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

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

与：

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

Answer 2

javascript在你写的地方执行，如果你写在元素之前，那么元素不存在。

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

Answer 3

您正在尝试设置 div 源。您需要在每个 div 中有一个图像 (img) 元素，然后设置图像 src.

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

另一种选择是使用属性或 class 属性样式设置 div 背景图像（两者都使用 CSS 设置 JavaScript).

在 2 个单独的 div 中将图像从一个更改为下一个

Making an image change from one to the next in 2 seperate divs

html

javascript

css

jquery