我是新的php和js编程和需要帮助我的网站项目。
在另一个问题中，我遇到了一个图像发布系统的问题，解决了：
求救！如何在帖子中显示相册[仅使用php和mysql]。
现在我想修改这个动态图像滑块张贴系统(下一级^^）
最后，必须能够通过帖子向下滚动，并且在每一篇有超过一张图片的帖子中，必须能够左右滑动本相册的图片。
图像滑块
我的灵感来自全屏图像滑块：https://codepen.io/bradtraversy/pen/boydae
和旋转滑块：https://www.youtube.com/watch?v=kcdbook3pfw
既普通又静态（没有数据库）。
下面你可以看到我的php文件，所有的东西都放在一起。
显示.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'；，页面变得疯狂(仅通过图像滑块）。即使所有东西都有一个类，没有唯一的id。
包含图片\u 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>问题是，我必须知道每个帖子里面有多少张图片。所以这不能与数据库一起动态使用，有人知道要更改什么吗？
包含图片\u滑块\u 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中，不可能为每个帖子多次提供此功能
我希望有人能帮助我。
致以最诚挚的问候：）
1条答案
按热度按时间44u64gxh1#
我想你想要这样的东西。我用flickity slider（纯javascript）代替了你的javascript，因为我无法让它工作（但是，我几乎不能用javascript编写foreach循环：（），希望这能给你一些开始的东西。：）
https://flickity.metafizzy.co/
头文件中的css和javascript文件包括slider插件。
然后，第一个sql查询获取所有post，while在每个post上循环。
对于每个post，第二个sql查询获取当前post的图像。
如果只有一个图像，它将打印在
<div class="image_container">.如果有多个图像，它们会被打印在
<div class="main-carousel">它告诉javascript插件data-flickity='{ "cellAlign": "left", "contain": true }'它需要在滑块中显示这些。滑块中的每个图像都打印在
<div class="carousel-cell">这也是插件所必需的。这对所有帖子的所有图片都是重复的，您不需要使用include文件。
从这篇文章用slider更新
我在这里更改的是，我将第二个sql查询的整个结果存储在一个数组中(
$rowsx)，因为这样我就可以在上面循环两次（用foreach而不是while).我第一次在上面循环是打印单个图像，当所有图像都打印完后，我第二次在数组上循环打印“点”以便导航，因为需要与滑块中的图像数量相同的点。