问题

Question

这是我第一次在stackoverflow上发帖，所以如果有任何我没有正确遵循的规则或指南，我会道歉。

问题

我目前正在开展一个学校项目，我们必须创建一个网站，我的网站正在使用砖石建造（来自http://masonry.desandro.com/）。我希望每次有人访问网站时我的图像都会以不同的方式显示，所以我想创建一个可以加载不同图像的系统。我已经在网上汇总了来自多个来源的代码，但它没有返回正确的图像（或任何相关的图像）。我对编码仍然很陌生，但我试图做到这一点的目的如下：

代码

<img id="image1" class="grid-item grid-item--width2 grid-item--height3" src="http://placehold.it/200x200">
      <script>
        var mydate = new date();
        var mynumber = mydate.getDate();

      document.getElementById("image1").src = "images/" + mynumber +".jpg";
      if(mynumber==33)
      {
          mynumber=1;
      }
      else
      {
          var mynumber=mynumber+1;
      }
      </script>

这背后的想法是它抓住日期，然后使用此日期开始抓取我的图像文件夹中的图像（图像被命名为1,2,3,4 ...这将继续并将添加到，但出于测试目的，我已确保他们已超过31）。这意味着网站每天的加载会略有不同。然而，这没有奏效，我无法弄清楚为什么。

其他信息

由于我对此很重要，我不知道解决这个问题需要多少信息，所以我现在尝试添加尽可能多的信息，可能不需要以下大部分内容。

我所有的测试都是在Chrome上进行的
我所有的工作都是用括号
我使用占位符图片开始所有图片
加载到页面上的每个图像都是以“image1”，“image2”，“image3”等开头的placholder图像。依此类推。
如果我可以使用此代码，它将被复制到每个图像下并逐个替换它们。

Js文件附件：

$(document).ready( function() {
    var $grid = $('.grid').masonry({
        itemSelector: '.grid-item',
        columnWidth: 200
    });

    var $stamp = $grid.find('.stamp');
    var isStamped = false;
    $('.stamp-button').on( 'click', function() {
        // stamp or unstamp element
        if ( isStamped ) {
            $grid.masonry( 'unstamp', $stamp );
        } else {
            $grid.masonry( 'stamp', $stamp );
        }
        // trigger layout
        $grid.masonry('layout');
        // set flag
        isStamped = !isStamped;
    });
});

谢谢你的时间

感谢您抽出宝贵时间帮助我完成学校项目。任何反馈都表示赞赏，如果您需要更多信息，请告诉我我能为您提供的服务。谢谢

Answer 1

我不知道masonary.Iso我想知道图像源，是否有任何数组持有图像？或者你会得到一个json响应。只是为了演示我已经将一些图像放在一个数组中。也不是每个图像都有它的扩展 .jpg 。在写作8Dec的这一天，我只放了10张图片。你可以放一些空的＆＃39; ＆＃39; 在图像之前只是为了匹配带有图像源的数组的索引

var tDate = new Date();
var getToday = tDate.getDate();
console.log(imgSource[getToday]);
document.getElementById("image1").src=imgSource[getToday];

要查看完整代码，请访问HERE

此外，您已添加此部分

src="http://placehold.it/200x200"

您是否需要在该位置将图像添加到图像？

需要帮助解决学校项目的html文件中的Javascript代码问题

问题

代码

其他信息

谢谢你的时间

1 个答案: