jquery 不改变 css 背景图像属性

Question

我正在尝试制作一个简单的幻灯片，使用 JQuery 更改 css 背景图像。

Fiddle: http://jsbin.com/xinihokuso/edit?js,console

var images = [
  "http://static1.squarespace.com/static/550b669de4b0d91b0f49935d/t/551b6575e4b0c2174c3a6f54/1427858806833/flowers.jpg?format=1500w",
  "http://cimages.prvd.com/is/image/ProvideCommerce/PF_15_R105_MINIMAL_VA0211_W1_SQ?$PFCProductImage$",
  "http://media02.hongkiat.com/ww-flower-wallpapers/purplecrocus.jpg",
  "http://www.ninthstreetflowers.com/smp/Smp1/images/flower4.jpg",
  "http://magic-spells-and-potions.com/images/flower-language-vertical.png",
];

var i = 0;

var div = $('.header_summer');

$(document).ready(function() {
  console.log("loaded");

  setTimeout(changeBack, 1000);
});

function changeBack() {
  i = i = ++i % images.length;

  if (i > images.length) {
    i = 0;
  }

  console.log('url(' + images[i] + ') no-repeat 0 0;');

  div.css('background', 'url(' + images[i] + ') no-repeat 0 0;');

  setTimeout(changeBack, 5000);
}

<div class="header_summer"></div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script>

<style type="text/css">

.header_summer  {
  background: url('http://static1.squarespace.com/static/550b669de4b0d91b0f49935d/t/551b6575e4b0c2174c3a6f54/1427858806833/flowers.jpg?format=1500w') no-repeat 0 0; 
  background-size: cover;
  min-height: 920px; /* 800px; */
}

</style>

一切看起来都很好，控制台在每个循环中都显示正确的 CSS 背景图像值，但所发生的只是最初声明的 CSS 中显示的原始图像。有什么想法吗？

请不要告诉我尝试为每个图像创建唯一的 CSS 选择器并简单地更改样式。这不是我要在这里实现的目标。

Answer 1

检查您的选择器和范围

如果您想要定位您在示例中提供的元素，您的 jQuery 选择器应包含一个 . 以表明您定位的是具有 class 的元素 "header_summer"：

var div = $(".header_summer");

此外，在您的 $(document).ready(){ ... }); 块之前声明它会导致一些问题，因为当时 jQuery 将不可用。考虑声明您的变量，然后在该函数中设置它：

var div;
$(document).ready(function(){
     div = $(".header_summer");
});

简化背景设置

目前，您正试图在 CSS 调用中设置除 background-image 之外的各种其他属性。如果你想这样做，你应该考虑使用 background 而不是 background-image :

div.css("background", "url('" + images[i] + "') no-repeat 0px 0px");

或者，如果您使用的是 background-image，则只需设置背景即可：

div.css("background", "url('" + images[i] + "')");

综合起来

.header_summer {
  background: url('http://static1.squarespace.com/static/550b669de4b0d91b0f49935d/t/551b6575e4b0c2174c3a6f54/1427858806833/flowers.jpg?format=1500w') no-repeat 0px 0px;
  background-size: cover;
  min-height: 920px;
  /* 800px; */
}

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>Flowers and stuff...</title>
</head>

<body>
  <!-- Your element to switch through -->
  <div class='header_summer'></div>
  <script src="https://code.jquery.com/jquery-2.1.4.js"></script>
  <script>
    // Define your images
    var images = [
 "http://static1.squarespace.com/static/550b669de4b0d91b0f49935d/t/551b6575e4b0c2174c3a6f54/1427858806833/flowers.jpg?format=1500w",
      "http://cimages.prvd.com/is/image/ProvideCommerce/PF_15_R105_MINIMAL_VA0211_W1_SQ?$PFCProductImage$",
      "https://i.kinja-img.com/gawker-media/image/upload/s--8a-AXhau--/c_scale,fl_progressive,q_80,w_800/zec3un8rzcmblrdlyswb.jpg",
      "http://media02.hongkiat.com/ww-flower-wallpapers/purplecrocus.jpg",
      "http://www.ninthstreetflowers.com/smp/Smp1/images/flower4.jpg",
      "http://magic-spells-and-potions.com/images/flower-language-vertical.png",
    ];
     // Define your variables
    var i = 0;
    var div;
    $(function() {
      // Set up your div
      div = $('.header_summer');
      console.log("loaded");
      setTimeout(changeBack, 1000);
    });

    function changeBack() {
      i = ++i % images.length;
      if (i > images.length) {
        i = 0;
      }
      console.log('url("' + images[i] + '");');
      div.css('background-image', "url('" + images[i] + "')");
      setTimeout(changeBack, 5000);
    }
  </script>
</body>
</html>

Answer 2

您缺少 class 选择器，它应该是：

var div = $('.header_summer');

此外，background-image 没有那么多参数：

div.css('background-image', 'url("../tpl/mbmhv1/images/' + images[i] + '")');

如果需要参数，请使用background

编辑：

您需要向您的元素添加一些 css

.header_summer {
    width: 100%;
    height: 100%;
    position: absolute;
}

Fiddle: http://jsbin.com/zufekurapo/edit?output

var images = [
  "http://static1.squarespace.com/static/550b669de4b0d91b0f49935d/t/551b6575e4b0c2174c3a6f54/1427858806833/flowers.jpg?format=1500w",
  "http://cimages.prvd.com/is/image/ProvideCommerce/PF_15_R105_MINIMAL_VA0211_W1_SQ?$PFCProductImage$",
  "http://media02.hongkiat.com/ww-flower-wallpapers/purplecrocus.jpg",
  "http://www.ninthstreetflowers.com/smp/Smp1/images/flower4.jpg",
  "http://magic-spells-and-potions.com/images/flower-language-vertical.png",
];

var i = 0;

var div = $('.header_summer');

$(document).ready(function() {
  console.log("loaded");

  setTimeout(changeBack, 1000);
});

function changeBack() {
  i = i = ++i % images.length;

  if (i > images.length) {
i = 0;
  }

  console.log(images[i]);

  div.css('background', 'url(\''+images[i] + '\') no-repeat');

  setTimeout(changeBack, 2000);
}

.header_summer {
    width: 100%;
    height: 100%;
    position: absolute;
}

<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-2.1.4.js"></script>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
<div class="header_summer"></div>
</body>
</html>

Answer 3

改一行代码：

div.css('background-image', 'url(' + images[i] + ')').css('background-repeat','no-repeat').css('background-position','left top');

Answer 4

您需要在声明像素后删除分号 (;)。

 div.css('background', 'url(' + images[i]  + ') no-repeat 0px 0px');

工作示例：https://jsfiddle.net/DinoMyte/ez8cgsx7/8/

jquery 不改变 css 背景图像属性

jquery not changing css background-image property

html

javascript

css

jquery

background-image

jquery 不改变 css 背景图像 属性

jquery not changing css background-image property

html

javascript

css

jquery

background-image

jquery 不改变 css 背景图像属性