Javascript HTML/CSS/JS不显示幻灯片图片

我基本上只是复制了W3schools的幻灯片教程，我在查看页面时看到了图片，但实际的图片没有显示在网站上。我不知道我是不是错过了一次试飞什么的。我用PHP获取图像，3个图像都是相同的，只是为了测试它

<div class="slideshow-container">
  <div class="mySlides fade">
    <div class="numbertext">1 / 3</div>
    <img src="images/<?php echo $row["product_image"]; ?>" />
    <div class="text">Caption Text</div>
  </div>

  <div class="mySlides fade">
    <div class="numbertext">1 / 3</div>
    <img src="images/<?php echo $row["product_image"]; ?>" />
    <div class="text">Caption Text</div>
  </div>

  <div class="mySlides fade">
    <div class="numbertext">1 / 3</div>
    <img src="images/<?php echo $row["product_image"]; ?>" />
    <div class="text">Caption Text</div>
  </div>
</div>

1/3
" />
标题文本
1/3
" />
标题文本
1/3
" />
标题文本

您可能缺少src中图像的宽度属性。像这样使用，它可能会工作

<div class="mySlides fade" >
    <div class="numbertext">1 / 3</div>
    <img src="images/<?php echo $row["product_image"]; ?>" style="width:100%" />
    <div class="text">Caption Text</div>
</div>

1/3
“style=“width:100%”/>
标题文本

我认为您没有添加Javascript。在页脚试试这个

<script>
var slideIndex = 1;
showSlides(slideIndex);

function plusSlides(n) {
  showSlides(slideIndex += n);
}

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

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

var slideIndex=1；
放映幻灯片（幻灯片索引）；
函数加滑块（n）{
放映幻灯片（幻灯片索引+=n）；
}
功能当前幻灯片（n）{
放映幻灯片（幻灯片索引=n）；
}
功能演示幻灯片（n）{
var i；
var slides=document.getElementsByClassName（“mySlides”）；
var dots=document.getElementsByClassName（“dot”）；
如果（n>slides.length）{slideIndex=1}
如果（n<1）{slideIndex=slides.length}
对于（i=0；i

Css类淡入淡出 不透明度为0，这将覆盖类淡入淡出。 将您的css类更改为

.fade{
webkit-animation-name: fade !important;
    -webkit-animation-duration: 1.5s !important; 
    animation-name: fade !important;
    animation-duration: 1.5s !important;
    opacity: 1 !important;

}

---

你的图像路径是否正确？你是否也将图像复制到了/images文件夹中..？是的，我在查看页面时可以看到图片。你可以将整个代码放入你的问题中吗？mySlides上应该有一些样式。mySlides阻止图像显示实际相反的效果，我甚至在检查页面时也看不到这些图片。你能发送你从哪里复制这行代码的w3schools链接吗？那么我认为你缺少图像的宽度。使用这条线，它将必须工作。“style=”宽度：100%“/>@cheunology图像未显示在网站上，因为您的主div具有“淡入”类，并且具有css“不透明度：0；”。将其设置为1。像这样的“不透明度：1；”是的，我复制了W3教程中的所有css和js，我只是不想在这里粘贴所有代码。但是我有所有的东西你能做密码笔检查密码吗？在css中使用它，然后检查.mySlides.fade{opacity:1；}，它修复了主要问题，但是我在页面上有多个产品，一次只显示一个图像