Question

我需要在div标签中制作背景图片并且它必须自动更改，我已经将图像数组放在javascript中，但是当我运行网站时图像没有显示。背景应该在后面菜单标题。

这是div

<div style="min-height:1000px;position:relative;" id="home">

div下面的

包含徽标，菜单和导航部分。

         <div class="container">
          <div class="fixed-header">
              <!--logo-->
               <div class="logo" >
                  <a href="index.html">
                      <img src="images/logo.png" alt="logo mazmida" height="142" width="242">
                      </a>
               </div>
                <!--//logo-->

这是javascript

 <script>
   var imgArray = [
    'images/1.jpg',
    'images/2.jpg',
    'images/3.jpg'],       

curIndex = 0;
    imgDuration = 2000;        



function slideShow() {
    document.getElementID('home').src = imgArray[curIndex];
    curIndex++;
    if (curIndex == imgArray.length) { curIndex = 0; }
    setTimeout("slideShow()", imgDuration);
}
slideShow();

Answer 1

您的脚本存在一些问题。我在这里制作了一个实时的JSbin示例：

https://jsbin.com/welifusomi/edit?html,output

  <script>
   var imgArray = [
    'https://upload.wikimedia.org/wikipedia/en/thumb/0/02/Homer_Simpson_2006.png/220px-Homer_Simpson_2006.png',
    'https://upload.wikimedia.org/wikipedia/en/thumb/0/0b/Marge_Simpson.png/220px-Marge_Simpson.png',
    'https://upload.wikimedia.org/wikipedia/en/a/aa/Bart_Simpson_200px.png'
   ]; 

   var curIndex = 0;
   var imgDuration = 1000;        

  var el = document.getElementById('home'); 

function slideShow() {
    el.style.backgroundImage = 'url(' + imgArray[curIndex % 3] + ')';
    curIndex++;
    setTimeout("slideShow()", imgDuration);
}
slideShow();
  </script>

您的脚本存在一些问题：

在元素上，因为它是div而不是img，你需要设置style.backgroundImage而不是src。查看https://developer.mozilla.org/en-US/docs/Web/CSS/background以获取与背景图像CSS相关的其他属性
也是document.getElementById

优化

你可以使用mod％技巧来避免零重置
使用setInterval而不是setTimeout

进一步优化

使用requestAnimationFrame而不是setTimeout / setInterval

我建议熟悉您的浏览器调试工具，这有助于识别您遇到的许多问题。

Answer 2

document.getElementID（＆＃39; home＆＃39;）。src = imgArray [curIndex]

您的目标是ID为home的div，但这不是Image元素（即

但是既然您想要改变DIV的背景颜色，那么您使用javascript将querySelector存储并存储在变量中，然后您可以定位此div的背景属性（即背景颜色）。

我希望这会有所帮助。

Answer 3

您正在尝试更改div的src属性，但div没有此类属性。

试试这个：

document.getElementById('home').style.backgroundImage = "url('" + imgArray[curIndex] + "')"

这会更改目标div的样式，更准确地说是用作背景的图像。

Answer 4

由于您要更改div的背景图片，而不是document.getElementID('home').src = imgArray[curIndex]使用 document.getElementById("#home").style.backgroundImage = "url('imageArray[curIndex]')";

在JavaScript或

中在jquery中

$('#home').css('background-image', 'url("' + imageArray[curIndex] + '")');。

Answer 5

要获得预期结果，请使用以下使用setInterval

的选项

请更正以下语法错误

document.getElementID为 document.getElementById
.src属性在div标签上不可用
创建img元素并向其添加src
最后在slideShow函数

 var imgArray = [
    'http://www.w3schools.com/w3css/img_avatar3.png',
    'https://tse2.mm.bing.net/th?id=OIP.ySEgAgJIlDQsIQTu_MeoLwHaHa&pid=15.1&P=0&w=300&h=300',
    'https://tse4.mm.bing.net/th?id=OIP.wBAPnR04OfXaHuFI9Ny2bgHaE8&pid=15.1&P=0&w=243&h=163'],       
curIndex = 0;
    imgDuration = 2000;        

var home = document.getElementById('home')
var image = document.createElement('img')

function slideShow() {
    if(curIndex != imgArray.length-1) { 
      image.src = imgArray[curIndex];
      home.appendChild(image)
      curIndex++;
    }else{
      curIndex = 0;
    } 
}
setInterval(slideShow,2000)

<div style="position:relative;" id="home"></div>

代码示例 - https://codepen.io/nagasai/pen/JLKvME

在<div>里面的javascript中生成图像数组

5 个答案: