广告内的服务器端图库（php、js？、ajax）

Question

我在文件夹中有一些图片，在数据库中有它们的路径。我想用这些图像（带有上一个和下一个按钮）制作一个照片库，而无需重新加载页面。

这里是 AJAX 函数（如果您有任何不使用 AJAX 的想法，我将不胜感激）：

function next_img(id_add, curr_img_id){
    //alert(id_add + curr_img_id);
    xmlhttp = new XMLHttpRequest();
    xmlhttp.onreadystatechange = function() {
        if (this.readyState == 4 && this.status == 200) {
            document.getElementById("recent_img").src = "<?php  echo "user_images/" . $row['Username'] . "/"?>" +this.responseText;
        }
    };
    xmlhttp.open("GET","gallerynext.php?add="+id_add + "&img="+curr_img_id,true);
    xmlhttp.send();
}

这是下一张图片的 php：

<?php
    include("inc/conectare_la_baza_de_date.php");

    $add_id = $_GET['add'];
    $img_id = $_GET['img'] + 1;
    $selectNextImgQuery = "SELECT * FROM imagini WHERE anunt_id='$add_id' AND img_id='$img_id'";
    $selectNextImgResult = mysqli_query($link, $selectNextImgQuery);
    $nextImg = mysqli_fetch_assoc($selectNextImgResult);
    $nextImgPath = $nextImg['img_path'];
    echo $nextImgPath;
?>

这是图片所在的html部分：

<img id="recent_img" src=<?php echo $imgPath; ?> alt="image" />
<a class="next_img" onclick="next_img(<?php echo $row['id_anunt'] ?> , <?php echo $img_id ?>)">&#10095;</a>
<a class="prev_img" onclick="prev_img(<?php echo $row['id_anunt'] ?> , <?php echo $img_id ?> )">&#10094;</a>

嗯，问题是当我按下下一个按钮时，它会给我下一张图片，但是……仅此而已。我无法弄清楚如何以及在何处增加当前图像 id 以便能够浏览所有图像。

我还必须想办法在按“下一张”时从最后一张照片跳到第一张，在按“上一张”时从第一张跳到最后一张。 图片在销售公告中，并且还有另一个用于更改公告的下一个和上一个按钮..因此图像集也发生了变化。如果您可以在不重新加载页面的情况下提供有关执行此操作的提示，我也将不胜感激。希望你能理解我的问题

这是它的实际外观：

Answer 1

一种可能的解决方案是使用 ajax 加载所有图像路径（一旦页面完成加载），而不是在单个请求中一个一个地加载。一旦你获得了所有的图像路径，例如，json 格式，你就可以在你的 javascript 环境中构建你的逻辑。例如，在右键单击时递增，在左击时递减，如果您已到达最后一个或相反的站点，则跳转到第一个索引。

另一种可能的解决方案，没有 ajax，实际上是使用 php 将所有图像输出到画廊中，一旦页面完成加载，您将画廊的逻辑绑定到 css 类，例如“显示”和“隐藏” - 这里是使用这种方法的示例实现。

window.onload = function(){
  var prevButton = document.querySelector('.prev');
  var nextButton = document.querySelector('.next');
  var galleryData = document.querySelectorAll('.gallery img');
  var imgCount = galleryData.length;
  var displayCount = 0;
  galleryData[0].setAttribute("class", "show");
  prevButton.addEventListener("click", function(_event){
    _event.preventDefault();
    displayCount--;
    if(displayCount == -1){
      displayCount = imgCount-1;
    }
    renderImages();
  });
  nextButton.addEventListener("click", function(_event){
    _event.preventDefault();
    displayCount++;
    if(displayCount == imgCount){
      displayCount = 0;
    }
    renderImages();
  });

  function renderImages(){
    for(i = 0; i < imgCount; i++){
      galleryData[i].setAttribute("class", "");
    }
    galleryData[displayCount].setAttribute("class", "show");
  }


  var myInterval = setInterval(function(){
    displayCount++;
    if(displayCount == imgCount){
      displayCount = 0;
    }
    renderImages();
  }, 2000);

}

setInterval 函数只是每 2000 毫秒切换一次实际图像的奖励。

回复评论：

$all_imgs_data 包含一个关联数组，其中包含来自 id 为 1 的用户的所有图像

$all_imgs = "SELECT * FROM imagini WHERE user_id = 1"
$result = mysqli_query($link, $all_imgs);
$all_imgs_data = mysqli_fetch_assoc($result);

所以像这样循环遍历它

<?php
foreach($all_imgs_data as $key => $value){
?>

<div id="gallery">
    <img src="<?php $value['something']; ?>" alt="cat">
</div>

<?php  
}
?>