我是PHP和JS编程的新手，需要网站项目的帮助。
在另一个问题中，我在图像发布系统上遇到了问题，该问题已解决：
SOS！如何在帖子中显示图片相册？[仅使用 PHP 和 MYSQL]。

现在我想用动态图像滑块修改这个发布系统。(下一级^^(最后，必须
可以通过帖子向下滚动，并且在每个具有1张以上图像的帖子中，必须可以左右滑动此相册的图像。图像滑块

我的灵感来自全屏图像滑块：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";如果我只使用包含"incl_image_slider.php";，页面会发疯......(仅通过图像滑块(。即使所有内容都有一个类并且没有唯一的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();

实际上这个图像滑块不滑动，不知道为什么？但它显示了帖子的第一张图片。而且在我的显示器中，不可能为每个帖子多次带来这个.php

我希望有人可以帮助我。
最好的问候:)

我想你想要这样的东西。我使用了Flickity Slider(纯JavaScript(而不是你的JavaScript，因为我无法让它工作(但话又说回来，我几乎无法在JavaScript :(中编写foreach循环(，希望这会给你一些开始。:)

https://flickity.metafizzy.co/

<!DOCTYPE html>
<html>
<head>
<!-- CSS -->
<link rel="stylesheet" href="https://unpkg.com/flickity@2/dist/flickity.min.css">
<!-- JavaScript -->
<script src="https://unpkg.com/flickity@2/dist/flickity.pkgd.min.js"></script>
</head>
<body>
<?php
$db = mysqli_connect("localhost", "root", "", "post_images");      
$result = mysqli_query($db, "SELECT * FROM posts");
?>
<?php while ($row = mysqli_fetch_array($result)) : ?>
<div class="post_container">$row['post_title'];
<?php $resultx = mysqli_query($db, "SELECT img_file, img_title FROM images WHERE post_id = " .$row['id_post']); ?>
<?php if (mysqli_num_rows($resultx) == 1) : ?>
<div class="image_container">
<div class="post_image_displayer">
<?php while ($rowx = mysqli_fetch_array($resultx)) : ?>
<img src='../folder_image_uploads/<?php echo $rowx['img_file']; ?>'><?php echo $rowx['img_title']; ?>
<?php endwhile; ?>
</div>
</div>
<?php elseif(mysqli_num_rows($resultx) > 1) : ?>
<div class="main-carousel" data-flickity='{ "cellAlign": "left", "contain": true }'>
<?php while ($rowx = mysqli_fetch_array($resultx)) : ?>
<div class="carousel-cell"><img src='../folder_image_uploads/<?php echo $rowx['img_file']; ?>' ></div>
<?php endwhile; ?>
</div>
<?php endif; ?>
</div>
<?php endwhile; ?>
</body>
</html>

标题中的 CSS 和 JavaScript 文件包含滑块插件。

然后，第一个SQL查询获取所有帖子，while循环访问每个帖子。

对于每个帖子，第二个 SQL 查询获取当前帖子的图像。

如果只有一个图像，则将其打印在<div class="image_container">内。

如果有多个图像，它们将打印在<div class="main-carousel">中，该告诉JavaScript插件和data-flickity='{ "cellAlign": "left", "contain": true }'它需要在滑块中显示这些图像。

滑块中的各个图像都打印在插件也需要的<div class="carousel-cell">内。

对所有帖子的所有图像重复此操作，您无需使用包含文件。

使用滑块更新来自这篇文章的 sinisake

<!DOCTYPE html>
<html>
<head>
<!-- CSS -->
<link rel="stylesheet" href="">
<!-- JavaScript -->
<script src=""></script>
</head>
<body>
<?php
$db = mysqli_connect("localhost", "root", "", "post_images");      
$result = mysqli_query($db, "SELECT * FROM posts");
?>
<?php while ($row = mysqli_fetch_array($result)) : ?>
<div class="post_container">$row['post_title'];
<?php $resultx = mysqli_query($db, "SELECT img_file, img_title FROM images WHERE post_id = " .$row['id_post']); ?>
<?php if (mysqli_num_rows($resultx) == 1) : ?>
<div class="image_container">
<div class="post_image_displayer">
<?php while ($rowx = mysqli_fetch_array($resultx)) : ?>
<img src='../folder_image_uploads/<?php echo $rowx['img_file']; ?>'><?php echo $rowx['img_title']; ?>
<?php endwhile; ?>
</div>
</div>
<?php elseif(mysqli_num_rows($resultx) > 1) : ?>
<div class="slideshow-container">
<?php $rowsx = mysqli_fetch_all($resultx, MYSQLI_ASSOC); ?>
<?php foreach ($rowsx as $key => $rowx) : ?>
<div class="mySlides fade">
<div class="numbertext"><?php echo $key + 1; ?> / <?php echo count($rowsx); ?></div>
<img src='../folder_image_uploads/<?php echo $rowx['img_file']; ?>' style="width:100%">
<div class="text">Caption Text</div>
</div>
<?php endforeach; ?>
<a class="prev" >&#10094;</a>
<a class="next">&#10095;</a>
<div style="text-align:center">
<?php foreach ($rowsx as $rowx) : ?>
<span class="dot"></span>
<?php endforeach; ?>
</div>  
</div>
<?php endif; ?>
</div>
<?php endwhile; ?>
</body>
</html>

我在这里更改了什么，我将第二个SQL查询的整个结果存储在一个数组($rowsx(中，因为这样我可以循环两次(使用foreach而不是while(。

我第一次循环访问它是打印单个图像，当所有图像都打印完毕后，我第二次循环遍历数组以打印导航的"点"，因为需要与滑块中的图像相同数量的点。

如何创建多个动态图像滑块？[仅使用PHP，MySQL和vanilla JS！

显示.php

incl_image_slider.php

incl_image_slider_app.js

相关内容

最新更新

热门标签：