Question

我的jQuery背景幻灯片图像有问题，当我在实时视图中为我的两个代码编辑器（即Visual Studio Code和Brackets）打开项目时，但是当我通过不会显示文件夹和index.html图像，但是存在我应用于图像的线性渐变，Chrome和Internet Explorer都是这种情况。

jQuery是在较早版本中编码的-我在项目中拥有最新版本-这可能会引起问题吗？ -这也是我使用Bootstrap 4的第一个项目，不确定是否存在问题，但是正如我在上面所说的那样，当使用代码编辑器查看幻灯片时，幻灯片可以完美显示

image shows in live view

image missing in browser

jQuery在这里。

$(document).ready(function() {
  //Array of images which you want to show.
  var images = new Array(
    "../img/head-anenomeRight.jpeg",
    "../img/head-clownAnenome.jpeg",
    "../img/head-corals.jpeg",
    "../img/head-discus.jpg",
    "../img/head-yellowTang.jpg"
  );
  var nextimage = 0;
  doSlideshow();

  function doSlideshow() {
    if (nextimage >= images.length) {
      nextimage = 0;
    }
    $("#home")
      .css(
        "background-image",
        'linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)),url("' +
          images[nextimage++] +
          '")'
      )
      .fadeIn(500, function() {
        setTimeout(doSlideshow, 6000);
      });
  }
});

html在这里。

<!--Header-->
  <header id="home">
    <div class="home-inner container">
      <div class="row">
        <div class="col-lg-8">
          <h1 class="display-3">Aquatics
            <span id="head-number-color">4 </span>Finatics</h1>
          <h3 class="display-5 mb-3">Professional Aquarium Solutions</h3>
          <a href="#expertise-section" id="learn-more" class="btn text-white">Learn More</a>
        </div>
      </div>
    </div>
  </header>

css在这里。

#home {
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
  min-height: 700px;
}

如果有人可以使用Bootstrap或jQuery做更高效的背景幻灯片演示，那么我将很高兴学习。

Answer 1

代码正确。问题应该是图像的URL。检查路径是否正确。

或尝试以其他格式（例如png）保存图像。可以是任何图案颜色问题。

像这样更改图像并测试是否有效：

    $(document).ready(function() {
        //Array of images which you want to show.
        var images = new Array(
"https://images.freeimages.com/images/large-previews/ed3/a-stormy-paradise-1-1563744.jpg",
"https://images.freeimages.com/images/large-previews/f2c/effi-1-1366221.jpg",
"https://images.freeimages.com/images/large-previews/851/poppies-1369329.jpg");
       var nextimage = 0;
       doSlideshow();

       function doSlideshow() {
          if (nextimage >= images.length) {
             nextimage = 0;
          }
          $("#home").css(
              "background-image",
              'linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)),url("' + images[nextimage++] + '")'
           ).fadeIn(500, function() {
              setTimeout(doSlideshow, 6000);
             });
          }
    });

jQuery背景图像幻灯片无法在浏览器引导程序4中显示图像

1 个答案: