Question

在我的网站中，我正在研究字体的抽象。每个图像src都是随机的“字母”，我想在图像源的下方加上 exact 字母的标题。但是，图像的显示是随机的。

类似的东西；如果此div包含特定的img，则使用（this）img标题。并为属于同一组的每个图像和标题执行此操作。

或制作无花果标题类，并在存在某个img的情况下显示或隐藏它们，但这将是很多工作，并且会变得非常混乱。

也许我也在想太多，因为如果图像的链接不正确，它将显示图片的确切路径，包括带有扩展名的名称，这使我认为在下面显示图像很容易？

代码，我还没有尝试过，但是查看它的设置可能会很有用。

我用过的javascript

  $('.test').each(function() {

    var num = Math.floor(Math.random() * 26 + 1),
        img = $(this);

    img.attr('src', 'img/number'+num+'.gif');
    img.attr('alt', 'Src: '+img.attr('src'));

});

css

body{
}


.container1{
    width: 1425px;
    height: 100%;
    position: absolute;
    background-color: pink;
}

.container1 img{
    width: 75%;
    margin-left: auto;
    margin-right: auto;
    display: block;
}

.container{
    position: absolute;
    width: 1425px;
    height: 2262px;
    text-align: center;
}


.image1{
    width: 520px;
    height:300px;
    margin-top:50px;
    margin-left: auto;
    margin-right: auto;
    display: inline-block;
    overflow: hidden
    background-color:red;

}

.image2{
    width: 400px;
    height:231px;
    vertical-align: top;
    display: inline-block;
    background-color:red;
}


.image3{
    width: 268px;
    height:155px;
    vertical-align: top;
    display: inline-block;
     background-color:red;
}


.image4{
    width: 199px;
    height:115px;
    vertical-align: top;
    display: inline-block;
    background-color:red;
}


.image5{
    width: 158px;
    height:91px;
    vertical-align: top;
    display: inline-block;
    background-color:red;
}

.image6{
    width: 130px;
    height:75px;
    vertical-align: top;
    display: inline-block;
    background-color:red;
}


img{
    max-height: 100%;
    margin-left: auto;
    margin-right: auto;
    display: block;
}

和html

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">

  <link href="index.css" rel="stylesheet" />

</head>
<body>

<div class="container">
    <div class="image1"><img src="" class="test"/></div><p></p>

    <div class="image2"><img src="" class="test"/></div>
    <div class="image2"><img src="" class="test"/></div><p></p>

    <div class="image3"><img src="" class="test"/></div>
    <div class="image3"><img src="" class="test"/></div>
    <div class="image3"><img src="" class="test"/></div><p></p>

    <div class="image4"><img src="" class="test"/></div>
    <div class="image4"><img src="" class="test"/></div>
    <div class="image4"><img src="" class="test"/></div>
    <div class="image4"><img src="" class="test"/></div><p></p>

    <div class="image5"><img src="" class="test"/></div>
    <div class="image5"><img src="" class="test"/></div>
    <div class="image5"><img src="" class="test"/></div>
    <div class="image5"><img src="" class="test"/></div>
    <div class="image5"><img src="" class="test"/></div><p></p>

    <div class="image5"><img src="" class="test"/></div>
    <div class="image5"><img src="" class="test"/></div>
    <div class="image5"><img src="" class="test"/></div>
    <div class="image5"><img src="" class="test"/></div>
    <div class="image5"><img src="" class="test"/></div><p></p>

    <div class="image6"><img src="" class="test"/></div>
    <div class="image6"><img src="" class="test"/></div>
    <div class="image6"><img src="" class="test"/></div>
    <div class="image6"><img src="" class="test"/></div>
    <div class="image6"><img src="" class="test"/></div>
    <div class="image6"><img src="" class="test"/></div>


</div>


  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
  <script src="index.js"></script>

<!-- the body ends here -->
</body>
</html>

随机生成的img的figcaption

0 个答案: