使用 jquery 从数组更改图像 src

Question

我想更改一些图像的 src。网址随机存储在数组中，但图片未显示。图像存储在/img 文件夹中。

var images=["img/Square.png","img/Star.png","img/Circle.png","img/Triangle.png","img/Ellipse.png","img/Rectangle.png"];

var image1 = Math.floor((Math.random() * 6) + 1);
var image2 = Math.floor((Math.random() * 6) + 1);
var image3 = Math.floor((Math.random() * 6) + 1);

$("#img1").attr("src",images[image1]);
$("#img2").attr("src",images[image2]);
$("#img3").attr("src",images[image3]);

我的html代码是：

<div class="tag1" >
     <img id="img1" class="img-responsive" src="" alt=""  width="25%"  /> 
     <img id="img2" class="img-responsive" src="" alt=""  width="25%" style="margin-left:10%;"  >
     <img id="img3" class="img-responsive" src="" alt=""  width="25%" style="margin-left:10%;" >

Answer 1

"images" 不是字符串，而是变量（数组）。

试试这个，

 $("#img1").attr("src", images[image1]);

更新（评论后）：

您的随机值有时会得到 6 数组中不存在的将其更改为 5

  var image1 = Math.floor((Math.random() * 5) + 1);

并在 ready 函数中添加所有代码。

$(function(){
      var images=["img/Square.png","img/Star.png","img/Circle.png","img/Triangle.png","img/Ellipse.png","img/Rectangle.png"];

     var image1 = Math.floor((Math.random() * 5) + 1);
     var image2 = Math.floor((Math.random() * 5) + 1);
     var image3 = Math.floor((Math.random() * 5) + 1);

      $("#img1").attr("src",images[image1]);
      $("#img2").attr("src",images[image2]);
      $("#img3").attr("src",images[image3]);
  });

Answer 2

图像数组有 6 个元素，数组索引为 0,1,2,3,4,5。

Math.floor((Math.random() * 6) + 1)

这会生成一个介于 1 - 6 之间的随机数。如果它生成 6，您可能会收到错误（无图像），因为没有索引 6。最大值为 5。将其更改为：

Math.floor((Math.random() * 6))

您提供的代码中的其他所有内容看起来都正确。

Answer 3

var x

function shufflerandomay() {
    x = Math.floor((Math.random() * 4))
}

var groupImg1 = [
    "https://images.unsplash.com/photo-1530651788726-1dbf58eeef1f?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=882&q=80",
    "https://images.unsplash.com/photo-1559386484-97dfc0e15539?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1234&q=80",
    "https://images.unsplash.com/photo-1533461502717-83546f485d24?ixlib=rb-1.2.1&auto=format&fit=crop&w=900&q=60",
    "https://tse2.mm.bing.net/th?id=OIP.hjBODA9luVr29wosa528_AHaJ4&pid=Api"
];

var groupImg2 = [
    "https://tse3.mm.bing.net/th?id=OIP.e3osvFsA7n8pz3DQ8wIiZQHaLH&pid=Api",
    "https://tse2.mm.bing.net/th?id=OIP.hjBODA9luVr29wosa528_AHaJ4&pid=Api",
    "https://tse3.mm.bing.net/th?id=OIP.CFC2G9JinfIvZUcXheEPogHaLG&pid=Api",
    "https://tse2.mm.bing.net/th?id=OIP.ZKmrVM1RDpBkM-Ci4zIVUgHaJ4&pid=Api"
];

var groupImg3 = [
    "https://tse2.mm.bing.net/th?id=OIP.POLdja72DCes6PMNvp0T-gHaJQ&pid=Api",
    "https://tse2.mm.bing.net/th?id=OIP.ZKmrVM1RDpBkM-Ci4zIVUgHaJ4&pid=Api",
    "https://tse1.mm.bing.net/th?id=OIP.os-yHe1FYwTDWnDXiCuUCAHaLH&pid=Api",
    "https://tse2.mm.bing.net/th?id=OIP.muJtFt8tt4knnW4JxPwGBAHaLG&pid=Api"
];

$(document).ready(function() {
    shufflerandomay(groupImg1[x])
    $("#img1").attr("src", groupImg1[x])
    shufflerandomay(groupImg2[x])
    $("#img2").attr("src", groupImg2[x])
    shufflerandomay(groupImg3[x])
    $("#img3").attr("src", groupImg3[x])
});


$('input').on('click', function() {
    shufflerandomay(groupImg1[x])
    shufflerandomay(groupImg2[x])
    shufflerandomay(groupImg3[x])

    $("#img1").attr("src", groupImg1[x])
    $("#img2").attr("src", groupImg2[x])
    $("#img3").attr("src", groupImg3[x])
});

@import url("https://fonts.googleapis.com/css?family=DM+Sans:400,500,700&display=swap");
* {
    box-sizing: border-box;
}

html,
body {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
}

body {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 30px 10px;
    font-family: "DM Sans", sans-serif;
    transition: background 0.4s ease-in;
    background-color: #0098fd;
}

body.mentol {
    background-color: #06c7ad;
}

input[type=radio] {
    display: none;
}

.card {
    position: absolute;
    width: 60%;
    height: 100%;
    left: 0;
    right: 0;
    margin: auto;
    transition: transform 0.7s ease;
    cursor: pointer;
}

.container {
    width: 100%;
    max-width: 800px;
    max-height: 600px;
    height: 100%;
}

.cards {
    position: relative;
    width: 100%;
    height: 100%;
    margin-bottom: 20px;
}

img {
    width: 100%;
    height: 100%;
    border-radius: 10px;
    -o-object-fit: cover;
    object-fit: cover;
}

#item-1:checked~.cards #message-3,
#item-2:checked~.cards #message-1,
#item-3:checked~.cards #message-2 {
    transform: translatex(-40%) scale(0.8);
    opacity: 0.4;
    z-index: 0;
}

#item-1:checked~.cards #message-2,
#item-2:checked~.cards #message-3,
#item-3:checked~.cards #message-1 {
    transform: translatex(40%) scale(0.8);
    opacity: 0.4;
    z-index: 0;
}

#item-1:checked~.cards #message-1,
#item-2:checked~.cards #message-2,
#item-3:checked~.cards #message-3 {
    transform: translatex(0) scale(1);
    opacity: 1;
    z-index: 1;
}

#item-1:checked~.cards #message-1 img,
#item-2:checked~.cards #message-2 img,
#item-3:checked~.cards #message-3 img {
    box-shadow: 0px 0px 5px 0px rgba(81, 81, 81, 0.47);
}

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>CodePen - Playlist Carousel - css only</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
    <link rel="stylesheet" href="css/style.css">

</head>

<body>

    <div class="container">

        <input type="radio" name="slider" id="item-1" checked>
        <input type="radio" name="slider" id="item-2">
        <input type="radio" name="slider" id="item-3">

        <div class="cards">

            <label class="card" for="item-1" id="message-1">
                <img id="img1" src="https://tse3.mm.bing.net/th?id=OIP.e3osvFsA7n8pz3DQ8wIiZQHaLH&pid=Api">
              </label>

            <label class="card middleCard" for="item-2" id="message-2">
                <img id="img2" src="https://tse3.mm.bing.net/th?id=OIP.CFC2G9JinfIvZUcXheEPogHaLG&pid=Api">
              </label>

            <label class="card" for="item-3" id="message-3">
                <img id="img3" src="https://tse1.mm.bing.net/th?id=OIP.os-yHe1FYwTDWnDXiCuUCAHaLH&pid=Api">
              </label>

            <!-- end of cards -->
        </div>

        <!-- end of container -->
    </div>

    <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js'></script>
    <script src="js/script.js"></script>

</body>

</html>