在javascript/php中，能否根据文件中的照片数量循环更改数组大小？

对不起，这个问题基本上不是很清楚

我已经获得了php代码，可以根据url中给定的用户ID在目录中搜索照片。因此，如果userId=1，它将转到Photos/1，获取该目录中的所有照片，并将其输出到我可以在Javascript中使用的数组中。它起作用了

我的php/html代码中有一个外部javascript。 我正在更改分区的属性以显示照片。我在名为photodisplay的数组中有5个“照片容器”：

var photodisplay = 
[
    $("#photo1"),
    $("#photo2"),
    $("#photo3"),
    $("#photo4"),
    $("#photo5"),
];

然后我有一个循环来更改属性/img src：

function preloadingPhotos() {
for (var x=0; x<galleryarray.length; x++)
{
    photodisplay[x].attr("src", "Photos/" + userid + "/" + galleryarray[x]);
    console.log("preloaded photos");

}
displayPhoto();
}

这需要我手动输入photodisplay阵列的编号

我会考虑增加更多的阵列与复制的光容器。但我不认为这会起作用，因为我必须在上面的代码中手动输入数组的编号，使其淡入淡出

---

抱歉，这让人困惑。我尽力解释我的问题。我希望有人能帮忙。不要担心在目录部分检索图像，因为它可以工作。它相应地增加了照片的数组，我只是不知道如何用我的javascript来调整这个变化

您正在使用的方法无法缩放，因为您对幻灯片中的每个元素都有一个回调函数

您应该做的是将所有图像放在一个列表（或

div

列表）中，并将它们全部隐藏/更改z索引，以便仅显示活动图像。您可以使用列表项上的

.next（）

循环遍历元素，以获取下一个元素（如果

.next（）.length

为0，则为第一个元素）

---

这将清理您的代码，而且您自己做起来非常容易，但也有大量jQuery插件为您做这件事。

您需要在这里进行一些抽象。因此，与其手动编码数字，不如尝试另一种方法。在这个例子中，我使用了jQuery；既然你用它来标记你的问题，我想没关系：

// Set a default value and store the current photo in it.
var currentPhoto = 0;
// Calculate the total number of photos
var photoTotal = photodisplay.length;
var photoTimeout = false;
// Create a function to go to the next photo
var nextPhoto = function () {
  // Keep track of the new current
  currentPhoto = (currentPhoto + 1) % photoTotal;
  // Just to be sure clearTimeout
  clearTimeout(photoTimeout);
  // Fadein each photo; you might want to do something to reset the style
  photodisplay[0].fadeIn({
    duration: 3000,
    complete: function () {
      photoTimeout = setTimeout(nextPhoto, 3000);
    }
  });  
}

nextPhoto();

---

你不想这样从后端定义JS；只需让PHP呈现标记，然后使用JS查询和解析表示层的标记

假设您的标记如下所示：

  <div id="photocontainers">
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
  </div>

  <!-- A hidden array of images. -->
  <div id="images">
    <img src="http://placehold.it/100x100&text=1" />
    <img src="http://placehold.it/100x100&text=2" />
    <img src="http://placehold.it/100x100&text=3" />
    <img src="http://placehold.it/100x100&text=4" />
    <img src="http://placehold.it/100x100&text=5" />
    <img src="http://placehold.it/100x100&text=6" />
    <img src="http://placehold.it/100x100&text=7" />
    <img src="http://placehold.it/100x100&text=8" />
    <img src="http://placehold.it/100x100&text=9" />
    <img src="http://placehold.it/100x100&text=10" />
    <img src="http://placehold.it/100x100&text=11" />
  </div>

所以你的服务器呈现这个#图像只是一个隐藏的容器，它基本上预加载了所有图像资源，您将在照片容器中循环

var cycleImages = function() {

  // Cache selectors that we'll need.
  var $photoContainers = $('#photocontainers').children(),
    $images = $('#images img'),

    // Use `.data()` to get the starting point, or set to 0
    // (if this is the first time the function ran).
    startImage = $images.data('nextImage') || 0;

  // Loop from the starting point, filling up the number of 
  // photocontainers in the DOM.
  for (var i = startImage; i < startImage + $photoContainers.length; i++) {

    var $targetImage = $images.eq(i % $images.length),
      $targetPhotoContainer = $photoContainers.eq(i - startImage);

    // Get rid of the current contents.
    $targetPhotoContainer.empty();

    // Clone the desired image, and append it into place.
    $targetImage.clone().appendTo($targetPhotoContainer).fadeOut(0).fadeIn();
  }

  // Let's figure out which starting image is next up, and store that
  // with `.data()`.
  var nextImage = startImage + $photoContainers.length;

  if (nextImage >= $images.length) {
    nextImage -= $images.length;
  }

  $images.data('nextImage', nextImage);
}

// When the DOM is ready, call the method, then
// call it again however often you'd like.

$(document).ready(function() {

  cycleImages();

  setInterval(function() {
    cycleImages();
  }, 3000);
});

var cycleImages=function（）{
//我们需要的缓存选择器。
var$photoContainers=$（“#photoContainers”）.children（），
$images=$（“#images img”），
//使用“.data（）”获取起点，或设置为0
//（如果这是函数第一次运行）。
startImage=$images.data（'nextImage'）|| 0；
//从起点开始循环，填充
//DOM中的光容器。
对于（var i=startImage；i=$images.length）{
nextImage-=$images.length；
}
$images.data（'nextImage'，nextImage）；
}
//当DOM就绪时，调用该方法，然后
//不管你愿意多频繁地打电话给它。
$（文档）.ready（函数（）{
cycleImages（）；
setInterval（函数（）{
cycleImages（）；
}, 3000);
});

---

这里有一个plunkr显示了它的作用：

那么我只需要更改displayPhoto函数还是Preload Photo函数？因为preload photo函数将图像放入列表中。。。我很困惑：很抱歉..@fondillusions如果您在html源代码中已经有了所有图像，那么您只需要更改javascript函数。这些图像只会添加到javascript中的div中。在我的html中，我有php代码来获取图像并将其更改为javascript数组。感谢您花时间编写该代码。我只是对现在如何更改代码感到困惑。我对编码还不熟悉，所以不是很好。我在想，如果我只是手动浏览div，将照片添加到中，是否有效。因此，不要光显示[x]和循环，而是对0-4进行光显示，然后肯定会在加载后继续将阵列中的照片添加到其中：我不知道。我现在就试试看！你认为你能向我提供一些详细的联系方式，以便我能向你寻求更多帮助吗）谢谢你的回复。我有php代码将图像从目录检索到数组中。这与将其放入div的“隐藏数组”不一样吗？在cycleImages函数中，我们在哪里更改photcontainters的属性？如果这些是愚蠢的问题，对不起。我只是很困惑。除非你有很好的理由，否则你不应该让用户组装这些路径。只需将所需图像渲染为真实标记，就不必在浏览器中进行所有重建。您不必设置属性，因为您正在处理已经准备就绪的DOM元素。我正在尝试根据用户对内容进行个性化设置，这就是为什么我要做userId的事情。。。

var cycleImages = function() {

  // Cache selectors that we'll need.
  var $photoContainers = $('#photocontainers').children(),
    $images = $('#images img'),

    // Use `.data()` to get the starting point, or set to 0
    // (if this is the first time the function ran).
    startImage = $images.data('nextImage') || 0;

  // Loop from the starting point, filling up the number of 
  // photocontainers in the DOM.
  for (var i = startImage; i < startImage + $photoContainers.length; i++) {

    var $targetImage = $images.eq(i % $images.length),
      $targetPhotoContainer = $photoContainers.eq(i - startImage);

    // Get rid of the current contents.
    $targetPhotoContainer.empty();

    // Clone the desired image, and append it into place.
    $targetImage.clone().appendTo($targetPhotoContainer).fadeOut(0).fadeIn();
  }

  // Let's figure out which starting image is next up, and store that
  // with `.data()`.
  var nextImage = startImage + $photoContainers.length;

  if (nextImage >= $images.length) {
    nextImage -= $images.length;
  }

  $images.data('nextImage', nextImage);
}

// When the DOM is ready, call the method, then
// call it again however often you'd like.

$(document).ready(function() {

  cycleImages();

  setInterval(function() {
    cycleImages();
  }, 3000);
});