使用JavaScript更改背景图像

时间:2018-02-08 15:18:36

标签: javascript html css background-image

我试图在一段时间后使用JavaScript自动更改div的背景图像(但这是我第一次使用JS)。 JavaScript代码中没有任何内容可用;没有这些图像出现,也没有交换。

    <script type ="text/javascript">
      function displayNextImage() {
          x = (x === images.length - 1) ? 0 : x + 1;
          document.getElementById("img").style.backgroundImage = "url"+(images[x]);
      }
      function displayPreviousImage() {
          x = (x <= 0) ? images.length - 1 : x - 1;
          document.getElementById("img").style.backgroundImage = "url"+(images[x]);
      }
      function startTimer() {
          setInterval(displayNextImage, 3000);
      }
      var images = [], x = -1;
      images[0] ='../images/ploutarxos.jpg';
      images[1] ='../images/xatzigiannhs.jpg';
      images[2] ='../images/taylor_swift.jpg';
      images[3] ='../images/selena_gomez.jpg';
      images[4] ='../images/the_weeknd.jpg';
      images[5] ='../images/drake.jpg';
  </script>
    <title>
        Hello world.
    </title>
</head>
<body onload="startTimer()">
    <div id="img" class="swapingImages">
        Oke <br>
        Bla
    </div>

5 个答案:

答案 0 :(得分:0)

我发现的一个拼写错误如下: $ ./Mist.exe --help Usage: Mist.exe --help [Mist options] [Node options] Mist options: --mode, -m App UI mode: wallet, mist. [string] [default: "mist"] --node Node to use: geth, eth [string] [default: null] --network Network to connect to: main, test [string] [default: null] --rpc Path to node IPC socket file OR HTTP RPC hostport (if IPC socket file then --node-ipcpath will be set with this value). [string] --swarmurl URL serving the Swarm HTTP API. If null, Mist will open a local node. [string] [default: "http://localhost:8500"] --gethpath Path to Geth executable to use instead of default. [string] --ethpath Path to Eth executable to use instead of default. [string] --ignore-gpu-blacklist Ignores GPU blacklist (needed for some Linux installations). [boolean] --reset-tabs Reset Mist tabs to their default settings. [boolean] --logfile Logs will be written to this file in addition to the console. [string] --loglevel Minimum logging threshold: info, debug, error, trace (shows all logs, including possible passwords over IPC!). [string] [default: "info"] --syncmode Geth synchronization mode: [fast|light|full] [string] --version, -v Display Mist version. [boolean] --skiptimesynccheck Disable checks for the presence of automatic time sync on your OS. [boolean] Node options: - To pass options to the underlying node (e.g. Geth) use the --node- prefix, e.g. --node-datadir Options: -h, --help Show help [boolean] 它应该是: "url"+(images[x]);

&#13;
&#13;
"url(" + images[x] + ")";
&#13;
var images = ['../images/ploutarxos.jpg',
  '../images/xatzigiannhs.jpg',
  '../images/taylor_swift.jpg',
  '../images/selena_gomez.jpg',
  '../images/the_weeknd.jpg',
  '../images/drake.jpg'
];

var img = document.getElementById("img");

function displayImage(x) {
  img.style.backgroundImage = "url(" + images[x] + ")";
  img.innerText = images[x];
}
function startTimer() {
  var x = 0;
  displayImage(x);
  setInterval(function() {
    x = x + 1 >= images.length ? 0 : x + 1;
    displayImage(x);
  }, 3000);
}
&#13;
swapingImages {
  heigth: 20px;
  width: 20px;
}
&#13;
&#13;
&#13;

答案 1 :(得分:0)

背景图片CSS样式的格式为url("/path")

document.getElementById("img").style.backgroundImage = 'url("' + images[x] + '")';

答案 2 :(得分:0)

更改此行

document.getElementById("img").style.backgroundImage = "url"+(images[x]);

到此

document.getElementById("img").style.backgroundImage = "url("+images[x]+")";

注意括号的位置。

答案 3 :(得分:0)

由于你是新手,我不会判断代码质量,只会注意到你所犯的错误。

你错过了css propery url的括号。

替换以下代码:

"url"+(images[x]);

使用以下代码:

"url(" + images[x] + ")";

请注意,我将初始括号移动到"引号中,因此它们将被视为实际字符,而不是像在数学术语中那样分隔内部术语优先级的典型括号。

答案 4 :(得分:-2)

您可以使用名为“UltraPlugin.js”的JavaScript库。将此库导入到您的页面,您可以使用命令:Dim not_in_zip() As String = arcstore.ArcFiles.Where(Function(file) Not records.Contains(file)) If not_in_zip.Count > 0 Then 'All of the values in "not_in_zip" are files not contained in the *.zip. 'You can display all of the values by using String.Join(",", not_in_zip) Else 'Every file is contained in the *.zip End If 来设置div的css