如何将数据库中的照片插入滑块答案

【问题标题】：How to insert a photo from the database into the slider如何将数据库中的照片插入滑块
【发布时间】：2022-02-05 05:59:38
【问题描述】：

有一个代码可以生成添加到数据库中的照片。我尝试将此代码插入到常规的 js 滑块中，但得到的只是一堆相互叠加的照片和一个不起作用的滑块。

如何用这段代码制作一个滑块？

include('dat.php');
$query = "SELECT * FROM tabl_image ORDER BY image_id DESC";
$statement = $connect->prepare($query); 
$statement->execute();
$result = $statement->fetchAll();
$number_of_rows = $statement->rowCount();
if($number_of_rows > 0)
{
 $count = 0;
 foreach($result as $row)
 {
  $count ++; 
  $output .= '
  <tr>
   <td><img src="files/'.$row["image_name"].'" class="img-thumbnail" onclick="openImageWindow(this.src);" style="cursor:pointer;" width="300" height="300" alt="'.$row["image_description"].'" title="'.$row["image_description"].'"/></td>
  </tr>
  ';
 }
}
else
{
 $output .= '
  <tr>
   <td colspan="6" align="center">Данные не найдены</td>
  </tr>
 ';
}
$output .= '</table>';
echo $output;
?>

当此脚本位于滑块中时，代码如下所示

<div class="slider">
  <input type="radio" name="switch" id="btn1" checked="">
  <input type="radio" name="switch" id="btn2">
  <input type="radio" name="switch" id="btn3">
   <input type="radio" name="switch" id="btn4">
  
  <div class="switch">
    <label for="btn1"></label>
    <label for="btn2"></label>
    <label for="btn3"></label>
    <label for="btn4"></label>
  </div>
  
  <div class="slider-inner">
    <div class="slides">
      
  
   <img src="files/dsc09678.jpg" class="img-thumbnail" onclick="openImageWindow(this.src);" style="cursor:pointer;" width="300" height="300" alt="" title="">
  
  
  
   <img src="files/1920x1200_494270_[www.ArtFile.ru].jpg" class="img-thumbnail" onclick="openImageWindow(this.src);" style="cursor:pointer;" width="300" height="300" alt="" title="">
  
  
  
   <img src="files/dsc09678.jpg" class="img-thumbnail" onclick="openImageWindow(this.src);" style="cursor:pointer;" width="300" height="300" alt="" title="">
  
  
  
   <img src="files/1920x1200_494270_[www.ArtFile.ru].jpg" class="img-thumbnail" onclick="openImageWindow(this.src);" style="cursor:pointer;" width="300" height="300" alt="" title="">
  
  
  
   <img src="files/dsc09678.jpg" class="img-thumbnail" onclick="openImageWindow(this.src);" style="cursor:pointer;" width="300" height="300" alt="" title="">
  
  
  
   <img src="files/1920x1200_494270_[www.ArtFile.ru].jpg" class="img-thumbnail" onclick="openImageWindow(this.src);" style="cursor:pointer;" width="300" height="300" alt="" title="">
  
      </div>
  </div>
  
</div>

【问题讨论】：

那么您将需要创建适当的 HTML 结构，无论您使用什么滑块脚本/库，都希望能够正常工作。
请发布代码，而不是代码图像。您的 PHP 输出和工作 HTML 之间到底有什么区别？编辑：从头开始，您的代码正在生成一个表格，而工作示例只是
中的一堆。您可能想要解决这个明显的差异。
“这是当这个脚本在滑块中时代码的样子” - 你是说你在第一个脚本中创建的所有那些 table、tr、td 元素，突然消失了？那么这可能表明这不是滑块脚本最初期望的那种结构。
我是 php 新手。然后如何在滑块中指定数据库中的照片，尽管照片会以不同的方式为每个用户更改
@Chris G 已更正。代码中表示

【解决方案1】：

你应该使用JS来改变item。

var slideIndex = 1;
showSlides(slideIndex);

function currentSlide(n) {
  showSlides(slideIndex = n);
}

function showSlides(n) {
  var i;
  var slides = document.getElementsByClassName("mySlides");
  if (n > slides.length) {slideIndex = 1}    
  if (n < 1) {slideIndex = slides.length}
  for (i = 0; i < slides.length; i++) {
      slides[i].style.display = "none";  
  }
  slides[slideIndex-1].style.display = "block";  
}

* {box-sizing: border-box}
.mySlides {display: none}
img {
  vertical-align: middle;
  max-width: 200px;
}

/* Slideshow container */
.slideshow-container {
  max-width: 1000px;
  position: relative;
  margin: auto;
}

/* Caption text */
.text {
  color: #f2f2f2;
  font-size: 15px;
  padding: 8px 12px;
  position: absolute;
  bottom: 8px;
  width: 100%;
  text-align: center;
}

/* Number text (1/3 etc) */
.numbertext {
  color: #f2f2f2;
  font-size: 12px;
  padding: 8px 12px;
  position: absolute;
  top: 0;
}

.active {
  background-color: #717171;
}

/* Fading animation */
.fade {
  -webkit-animation-name: fade;
  -webkit-animation-duration: 1.5s;
  animation-name: fade;
  animation-duration: 1.5s;
}

@-webkit-keyframes fade {
  from {opacity: .4} 
  to {opacity: 1}
}

@keyframes fade {
  from {opacity: .4} 
  to {opacity: 1}
}

/* On smaller screens, decrease text size */
@media only screen and (max-width: 300px) {
  .text {font-size: 11px}
}

<div>
  <input type="radio" name="switch" onclick="currentSlide(1)" checked=""/>
  <input type="radio" name="switch" onclick="currentSlide(2)" />
  <input type="radio" name="switch" onclick="currentSlide(3)" />
</div>

<div class="slideshow-container">
  <div class="mySlides fade">
    <img src="https://i.imgur.com/moc7wzX.jpeg" style="width:100%">
  </div>

  <div class="mySlides fade">
    <img src="https://i.imgur.com/1GR4azu.jpeg" style="width:100%">
  </div>

  <div class="mySlides fade">
    <img src="https://i.stack.imgur.com/ObWbI.png" style="width:100%">
  </div>
</div>

PS：图片是在imgur上随机拍摄的。

【讨论】：

不错。谢谢。
如果它解决了你的问题，你可以点击我帖子左上角的复选标记！
是的。谢谢你。它帮助了我