您可以根据JavaScript/PHP中的文件中的照片数量进行循环以更改数组大小

Question

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

我有了PHP代码，可以根据URL中给出的用户ID搜索目录中的照片。因此，如果用户ID = 1，它将转到照片/1，并在该目录中获取所有照片，然后将其输出到我可以在JavaScript中使用的数组。有用。

我有一个外部JavaScript到我的PHP/HTML代码。我正在更改Div的属性以显示照片。我在名为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();
}

它有效。提供不超过5张照片，因为那是我拥有多少个光关节。但是，如果我有照片怎么办？问题是：我能够做一个循环以继续更改photoDisplay数组中的照片吗？

我也有代码可以淡化和淡出：

function displayPhoto(){

photodisplay[0].fadeIn(3000);
photodisplay[0].delay(3000).fadeOut(3000, function() { //first callback func
photodisplay[1].fadeIn(3000);
photodisplay[1].delay(3000).fadeOut(3000, function() { //second callback func
photodisplay[2].fadeIn(3000);
photodisplay[2].delay(3000).fadeOut(3000, function() { //third callback func
photodisplay[3].fadeIn(3000);
photodisplay[3].delay(3000).fadeOut(3000, function() { // fourth callback func
photodisplay[4].fadeIn(3000);
photodisplay[4].delay(3000).fadeOut(3000, function() {
setTimeout(displayPhoto(), 3000);
});
}); 
});
}); 
});
}// end of function displayPhoto

要求我手动输入光电板阵列的数量。

我想通过重复的光关注剂来添加更多的阵列。但是我认为这是不起作用的，因为我必须在上面的代码中手动输入数组的数量才能使其褪色。

对不起，如果这令人困惑。我尽力解释我的问题。我希望有人能帮帮忙。不必担心目录部分中的图像，因为它可以工作。它相应地增加了照片的数组，我只是不知道如何使用JavaScript调整此更改。

Answer 1

您正在使用的方法，由于您对幻灯片中的每个元素具有回调函数，因此不会扩展。

您应该做的是将所有图像放在列表中（或div's的列表）中，然后将它们全部隐藏/更改z索引，以便只有一个活动。您可以在列表项目上使用.next()循环浏览元素以获取下一个（或第一个（如果.next().length为0））。

这将清理您的代码，并且很容易自己动手，但是也有许多jQuery插件可以为您服务。

Answer 2

您需要在这里进行一些抽象。因此，不要手动编码编号，而是尝试另一种方法。在此示例中，我使用了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();

Answer 3

您不想从后端定义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>

因此，您的服务器将其呈现；#Images只是一个隐藏的容器，基本上是在#photocontainers中循环的所有图像资产。

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);
});

这是一个plunkr，显示在行动中：http：//plnkr.co/sumqkxyprxcoqehapohm