【发布时间】：2018-12-14 18:12:18
【问题描述】：
我是 PHP 和 JS 编程新手，我的网站项目需要帮助。
在另一个问题中，我遇到了图片发布系统的问题，已解决：
SOS! How to display image albums in posts? [using PHP and MYSQL only].
现在我想用动态图像滑块修改这个发布系统。 (下一关^^)
最后，必须可以向下滚动浏览帖子，并且在每个包含超过 1 张图片的帖子中，必须可以左右滑动浏览此相册的图片.
图像滑块
我受到全屏图像滑块的启发：https://codepen.io/bradtraversy/pen/boydaE
和一个轮播滑块：https://www.youtube.com/watch?v=KcdBOoK3Pfw
它们都是普通但静态的（没有数据库）。
您可以在下面看到我的 php 文件，其中所有内容都汇集在一起。
display.php
<!DOCTYPE html>
<html>
<body>
<?php
$db = mysqli_connect("localhost", "root", "", "post_images");
$result = mysqli_query($db, "SELECT * FROM posts");
while ($row = mysqli_fetch_array($result)) {
echo "<div class=\"post_container\">";
echo $row['post_title'];
echo "<div class=\"image_container\">";
SELECT img_file, img_title FROM images WHERE post_id = " .$rowx['id_post']);
if(mysqli_num_rows($resultx) > 0) {
if(mysqli_num_rows($resultx) == 1) {
echo "<div class=\"post_image_displayer\">";
while ($rowx = mysqli_fetch_array($resultx)) {
echo "<img src='../folder_image_uploads/".$rowx['img_file']."' >";
echo $rowx['img_title'];
}
echo "</div>";
}
elseif(mysqli_num_rows($resultx) > 1) {
echo "<div class=\"post_image_slider\">";
include_once 'incl_image_slider.php';
echo "</div>";
}
}
echo "</div>";
echo "</div>";
}
?>
</body>
</html>
如果此页面上只有 1 滑块，则此代码可以完美运行。你看，我使用了 include_once 'incl_image_slider.php'; 。如果我只使用 include 'incl_image_slider.php'; ，页面会发疯......（仅通过图像滑块）。即使所有东西都有一个 class 并且没有唯一的 id。
incl_image_slider.php
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="includes/incl_carousel_slider_style.css">
</head>
<div class="carousel-container">
<div class="carousel-slide">
<?php
$db = mysqli_connect("localhost", "root", "", "post_images");
$result = mysqli_query($db, "SELECT * FROM posts");
$row = mysqli_fetch_array($result);
$resultx = mysqli_query($db, "SELECT img_file, img_title FROM images WHERE post_id =".$row['id_post']);
$rowz = mysqli_fetch_all($resultx, MYSQLI_ASSOC);
echo "<img src='folder_img_uploads/".$rowz[0]['img_file']."' >";
echo "<img src='folder_img_uploads/".$rowz[1]['img_file']."' >";
echo "<img src='folder_img_uploads/".$rowz[2]['img_file']."' >";
echo "<img src='folder_img_uploads/".$rowz[3]['img_file']."' >";
echo "<img src='folder_img_uploads/".$rowz[4]['img_file']."' >";
?>
</div>
</div>
<button class="prevBtn">Prev</button>
<button class="nextBtn">Next</button>
<script src="incl_image_slider_app.js"></script>
问题是，我必须知道每个帖子里面有多少张图片。所以这不能与数据库一起动态使用，有人知道要改变什么吗？
incl_image_slider_app.js
部分来自：https://codepen.io/bradtraversy/pen/boydaE
let sliderImages = document.querySelectorAll(".carousel-slide"),
arrowLeft = document.querySelector(".prevBtn"),
arrowRight = document.querySelector(".nextBtn"),
current = 0;
// Clear all images
function reset()
{
for (let i = 0; i < sliderImages.length; i++)
{
sliderImages[i].style.display = "none";
}
}
// Init slider
function startSlide()
{
reset();
sliderImages[0].style.display = "block";
}
// Show prev
function slideLeft()
{
reset();
sliderImages[current - 1].style.display = "block";
current--;
}
// Show next
function slideRight()
{
reset();
sliderImages[current + 1].style.display = "block";
current++;
}
// Left arrow click
arrowLeft.addEventListener("click", function()
{
if (current === 0)
{
current = sliderImages.length;
}
slideLeft();
});
// Right arrow click
arrowRight.addEventListener("click", function()
{
if (current === sliderImages.length - 1)
{
current = -1;
}
slideRight();
});
startSlide();
实际上这个图像滑块不滑动，不知道为什么？但它显示了帖子的第一张图片。 在我的 display.php 中，不可能为每个帖子多次带来这个
我希望有人可以帮助我。
最好的问候:)
【问题讨论】：
-
你做过错误检查吗？
-
我没有收到任何错误，不幸的是图像滑块不起作用/滑动。而且我不能在一个页面上多次实现滑块，即使没有唯一的 id。我知道，这个话题有点复杂……
-
你也可以不用javascript，使用css3
-
css 滑块是我首先尝试的，灵感来自youtube.com/watch?v=z74ExMz-cWU，但有人告诉我，将其用于动态发布系统会非常复杂
标签： javascript php mysql image posting