Question

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

小提琴：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

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

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;
}

小提琴：http://jsbin.com/zufekurapo/edit?output

＆＃13;

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);
}

＆＃13;

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

＆＃13;

<!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>

＆＃13;

Answer 2

您需要在声明像素后删除分号（;）。

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

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

Answer 3

检查您的选择器和范围

如果你想定位你在例子中提供的元素，你的jQuery选择器应该包含一个.来表示你的目标是一个具有＆＃34; header_summer＆＃34;类的元素。：

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] + "')");

全部放在一起

＆＃13;

.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; */
}

＆＃13;

<!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>

＆＃13;

Answer 4

更改一行代码：

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

jquery不改变css background-image属性

4 个答案: