javascript - <Div> 中的随机图像来自数组

Question

我正在尝试在 JavaScript 和 CSS 的帮助下在 div 中显示随机图像在互联网上的某个地方获得脚本，试图用它制作画廊，每组 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);
})();