广告内的服务器端图库（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  
}
?>