如何创建多个动态图像滑块[仅使用php、mysql和vanilla js!]

vcirk6k6  于 2021-06-23  发布在  Mysql
关注(0)|答案(1)|浏览(289)

我是新的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中,不可能为每个帖子多次提供此功能
我希望有人能帮助我。
致以最诚挚的问候:)

44u64gxh

44u64gxh1#

我想你想要这样的东西。我用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文件包括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更新

<!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 ).
我第一次在上面循环是打印单个图像,当所有图像都打印完后,我第二次在数组上循环打印“点”以便导航,因为需要与滑块中的图像数量相同的点。

相关问题