Question

我正在尝试在我的网页上创建两个带有旋转图像的div，这些div会在一定时间后更改为另一个图像并且有3个图像要显示。目前我只是试图使用下面的代码来获得这种工作的机制，但是虽然它很简单但我无法使它工作。代码与我之前使用的代码相同但是这次它不想工作。我做了最后几年agao，我完全忘记了如何和研究没有帮助。

我的代码如下。如果这个问题是特定于站点的，我还包括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

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

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

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

Answer 2

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

未捕获的ReferenceError：$未定义| 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 3

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

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

在2个单独的div中使图像从一个变为另一个

3 个答案: