Question

我正在尝试将随机图像显示在div中，借助JavaScript和CSS在互联网上获取脚本，尝试使用此画廊，每个2图像集，其中1将显示。不知道是不是因为图像地址或代码

图片在网站`dir / images / a1.jpg中，当我在浏览器中打开文件时，图片不显示

$(function() {
  var url = "/images",
    imgArray = [url + "images/a1.jpg",
      url + "images/a2.jpg",
      url + "images/a3.jpg",
      url + "images/a4.jpg",
      url + "images/a5.jpg",
      url + "images/a6.jpg"
    ],
    randomNumber = Math.floor((Math.random() * imgArray.length)),
    baseUrl = "url('" + imgArray[randomNumber] + "')";

  $(".slider").css('background-image', baseUrl);
})
$(function() {
  var url = "/images/",
    imgArray = [url + "/images/a7.jpg",
      url + "/images/a8.jpg",
      url + "/images/a9.jpg",
      url + "/images/a10.jpg",
      url + "/images/a11.jpg",
      url + "/images/a12.jpg"
    ],
    randomNumber = Math.floor((Math.random() * imgArray.length)),
    baseUrl = "url('" + imgArray[randomNumber] + "')";

  $(".slider2").css('background-image', baseUrl);
})

@charset "utf-8";

/* CSS Document */

.slider {
  width: 300px;
  height: 300px;
  -webkit-background-size: 100% 100%;
  -moz-background-size: 100% 100%;
  background-repeat: no-repeat;
  border: 2px black solid;
}

.slider2 {
  width: 300px;
  height: 300px;
  -webkit-background-size: 100% 100%;
  -moz-background-size: 100% 100%;
  background-repeat: no-repeat;
  border: 2px black solid;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="slider1">
</div>

<div class="slider2">
</div>

Answer 1

你有变量

var url = "/images/"

然后你有

url+"/images/a7.jpg"

这意味着你的路径是

/images/images/a7.jpg

只需删除一次文件夹，例如

 $(function() {
  var url = "/images/",
    imgArray = [url + "a1.jpg",
      url + "a2.jpg",
      url + "a3.jpg",
      url + "a4.jpg",
      url + "a5.jpg",
      url + "a6.jpg"
    ],
    randomNumber = Math.floor((Math.random() * imgArray.length)),
    baseUrl = "url('" + imgArray[randomNumber] + "')";

  $(".slider1").css('background-image', baseUrl);
})
$(function () {
    var url = "/images/",
        imgArray = [url+"a7.jpg",
                   url+"a8.jpg",
                   url+"a9.jpg",
                   url+"a10.jpg",
                   url+"a11.jpg",
                   url+"a12.jpg"],
        randomNumber = Math.floor((Math.random() * imgArray.length)),
        baseUrl = "url('" + imgArray[randomNumber] + "')";

    $(".slider2").css('background-image', baseUrl);
})();

Answer 2

有两件事需要注意

图片的位置
指错题

$(function() {
  var imgArray = ["/images/a1.jpg",
     "/images/a2.jpg",
     "/images/a3.jpg",
     "/images/a4.jpg",
     "/images/a5.jpg",
     "/images/a6.jpg"
    ],
    randomNumber = Math.floor((Math.random() * imgArray.length)),
    baseUrl = "url('" + imgArray[randomNumber] + "')";

  $(".slider1").css('background-image', baseUrl);
})
$(function() {
  var imgArray = ["/images/a7.jpg",
      "/images/a8.jpg",
      "/images/a9.jpg",
      "/images/a10.jpg",
      "/images/a11.jpg",
      "/images/a12.jpg"
    ],
    randomNumber = Math.floor((Math.random() * imgArray.length)),
    baseUrl = "url('" + imgArray[randomNumber] + "')";

  $(".slider2").css('background-image', baseUrl);
})

@charset "utf-8";

/* CSS Document */

.slider {
  width: 300px;
  height: 300px;
  -webkit-background-size: 100% 100%;
  -moz-background-size: 100% 100%;
  background-repeat: no-repeat;
  border: 2px black solid;
}

.slider2 {
  width: 300px;
  height: 300px;
  -webkit-background-size: 100% 100%;
  -moz-background-size: 100% 100%;
  background-repeat: no-repeat;
  border: 2px black solid;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="slider1">
</div>

<div class="slider2">
</div>

希望这会对你有所帮助。

来自数组的<div>中的随机图像

2 个答案: