关于数组和使用图像源代码的Javascript问题，任何人都可以帮助？(不是随机img)

5jdjgkvh  于 2022-12-17  发布在  Java
关注(0)|答案(2)|浏览(177)

我已经创建了一些javascript的div，a，img元素。使我的网站更容易阅读，而不是垃圾邮件同样的东西一遍又一遍。
我现在的问题是--〉
我需要从我的数组（“src”）使用href和src链接，并将它们添加到我创建的图片和链接。
到目前为止，我只找到了一种用Math...（）来实现的方法，但是我不想以随机的顺序显示图像，我希望它们按照我在数组中放置的顺序显示。
这是我的代码下面我会很高兴，如果有人帮我！
我认为这可以用forEach解决，但我想不通...

var src = ["https://images.unsplash.com/reserve/bOvf94dPRxWu0u3QsPjF_tree.jpg?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1176&q=80" , 
           "https://images.unsplash.com/photo-1458966480358-a0ac42de0a7a?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1170&q=80"];

(function () {

  
    function createDiv() {
      
      var boardDiv = document.createElement("div");
      var link = document.createElement("a");
      var img = document.createElement("img");
  
      boardDiv.className = "col-md-6 col-lg-4 item";
      
      
      boardDiv.appendChild(link);
      link.className = "lightbox"
      link.appendChild(img);
      link.href = src[0];
      
      img.className ="img-fluid image scale-on-hover"
      img.src = src[Math.floor(Math.random() * src.length)];
  
      return boardDiv;
    }
  
    function createAndModifyDivs() {
      var board = document.getElementById("image-builder"),
        myDivs = [],
        i = 0,
        numOfDivs = src.length;
        
      for (i; i < numOfDivs; i += 1) {
        myDivs.push(createDiv());
        board.appendChild(myDivs[i]);
      }
    }
  
    createAndModifyDivs();
  
  }());
.gallery-block.grid-gallery{
  padding-bottom: 60px;
  padding-top: 60px;
}

.gallery-block.grid-gallery .heading{
    margin-bottom: 50px;
    text-align: center;
}

.gallery-block.grid-gallery .heading h2{
    font-weight: bold;
    font-size: 1.4rem;
    text-transform: uppercase;
}

.gallery-block.grid-gallery a:hover{
  opacity: 0.8;
}

.gallery-block.grid-gallery .item img{
  box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.15);
  transition: 0.4s;
}

.gallery-block.grid-gallery .item{
  margin-bottom: 20px;
}

@media (min-width: 576px) {

  .gallery-block.grid-gallery .scale-on-hover:hover{
    transform: scale(1.05);
    box-shadow: 0px 10px 10px rgba(0, 0, 0, 0.15) !important;
  }
}
<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Grid Gallery</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/baguettebox.js/1.10.0/baguetteBox.min.css" />
</head>

<body>
    <section class="gallery-block grid-gallery">
        <div class="container">
            <div class="heading">
                <h3>Alexis</h3>
            </div>
            
            <div class="row" id="image-builder">
            </div>

        </div>
        
    </section>

    <div id="board">
    </div>
    </div>
    <script src="app.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/baguettebox.js/1.10.0/baguetteBox.min.js"></script>
    <script>
        baguetteBox.run('.grid-gallery', { animation: 'slideIn' });
    </script>
</body>

</html>
JavaScript

2条答案

按热度按时间
gopyfrb3

gopyfrb31#

你可以修改你的createDiv()函数，把img src作为一个参数，然后在你的for循环中设置它，你的代码可以稍微清理一下，如果你留下评论的话，我可以帮助你，但是现在我只想回答你最初的问题。

var src = ["https://images.unsplash.com/reserve/bOvf94dPRxWu0u3QsPjF_tree.jpg?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1176&q=80" , 
           "https://images.unsplash.com/reserve/bOvf94dPRxWu0u3QsPjF_tree.jpg?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1176&q=80"];

(function () {

    // Take the image link as a parameter called imgSrc
    function createDiv(imgSrc) {
      
      var boardDiv = document.createElement("div");
      var link = document.createElement("a");
      var img = document.createElement("img");
      boardDiv.className = "col-md-6 col-lg-4 item";
      boardDiv.appendChild(link);
      link.className = "lightbox"
      img.className ="img-fluid image scale-on-hover"
      link.appendChild(img);
      // Assuming here you want to link to the image
      link.href = imgSrc;
      // Set the img src
      img.src = imgSrc;
      return boardDiv;
    }
  
    function createAndModifyDivs(elmId) {
      const board = document.getElementById(elmId);
      for (const imgSrc of src) {
        board.appendChild(createDiv(imgSrc));
      }
    }

    const galleries = ['image-builder', 'image-builder-2'];
    for(const gallery of galleries) {
        createAndModifyDivs(gallery);
        baguetteBox.run(`#${gallery}`);
    }

  
  }());
.gallery-block.grid-gallery{
  padding-bottom: 60px;
  padding-top: 60px;
}

.gallery-block.grid-gallery .heading{
    margin-bottom: 50px;
    text-align: center;
}

.gallery-block.grid-gallery .heading h2{
    font-weight: bold;
    font-size: 1.4rem;
    text-transform: uppercase;
}

.gallery-block.grid-gallery a:hover{
  opacity: 0.8;
}

.gallery-block.grid-gallery .item img{
  box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.15);
  transition: 0.4s;
}

.gallery-block.grid-gallery .item{
  margin-bottom: 20px;
}

@media (min-width: 576px) {

  .gallery-block.grid-gallery .scale-on-hover:hover{
    transform: scale(1.05);
    box-shadow: 0px 10px 10px rgba(0, 0, 0, 0.15) !important;
  }
}
<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Grid Gallery</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/baguettebox.js/1.10.0/baguetteBox.min.css" />
</head>

<body>
    <section class="gallery-block grid-gallery">
        <div class="container">
            <div class="heading">
                <h3>Alexis</h3>
            </div>
            
            <div class="gallery" id="image-builder">
            </div>

        </div>
        
    </section>
    
    <section class="gallery-block grid-gallery">
        <div class="container">
            <div class="heading">
                <h3>Other</h3>
            </div>
            
            <div class="gallery" id="image-builder-2">
            </div>

        </div>
        
    </section>

    <div id="board">
    </div>
    </div>
    <script src="app.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/baguettebox.js/1.10.0/baguetteBox.min.js"></script>
    <script>
    </script>
</body>

</html>
赞(0）分享  回复(0）举报  2022-12-17
kqlmhetl

kqlmhetl2#

您只需要做这两个更改，现在您将把src作为createDiv()的参数传递（查找注解）
在App.js中

var src = [
  "https://images.unsplash.com/reserve/bOvf94dPRxWu0u3QsPjF_tree.jpg?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1176&q=80",
  "https://images.unsplash.com/photo-1458966480358-a0ac42de0a7a?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1170&q=80",
];

(function () {
  //ADD A PARAMETER TO THE FUNCTION HERE
  function createDiv(img_src) {
    var boardDiv = document.createElement("div");
    var link = document.createElement("a");
    var img = document.createElement("img");

    boardDiv.className = "col-md-6 col-lg-4 item";

    boardDiv.appendChild(link);
    link.className = "lightbox";
    link.appendChild(img);
    link.href = src[0];

    img.className = "img-fluid image scale-on-hover";
    img.src = img_src;

    return boardDiv;
  }

  function createAndModifyDivs() {
    var board = document.getElementById("image-builder"),
      myDivs = [],
      i = 0,
      numOfDivs = src.length;

    for (i; i < numOfDivs; i += 1) {
      //PASS THE SRC OF THE DIRECT IMAGE AS PARAMETER HERE
      myDivs.push(createDiv(src[i]));
      board.appendChild(myDivs[i]);
    }
  }

  createAndModifyDivs();
})();
赞(0）分享  回复(0）举报  2022-12-17
我来回答

相关问题

    查看更多

    热门标签

    更多
    JavaquerypythonNode开发语言requestUtil数据库Table后端算法LoggerMessageElementParser

    最新问答

    更多
    • 蜀ICP备2022004421号-2 NULL123 https://www.null123.com © All rights reserved
    • 本站内容来源互联网,如果侵犯您的权益请联系我们删除, 联系方式：448109455@qq.com