Javascript 如何在jQuery中显示和更改一帧中的多个图像？

我想在一个框架中显示多个图像，当用户单击图像时，图像将发生变化，但当我这样做时，所有图像都以垂直线一个接一个地显示

我正在这样做：

             <div class="container-fluid">
              <div class="row" style="width:280px;height:360px">

                <?php $photos = explode(',',$product['image']);
                 foreach($photos as $photo):
                   ?>
                   <?php /*<img src="<?= $product['image']; ?>" alt="<?= $product['title']; ?>" class="img-thumb-detailModal"> */?>
                   <img src="<?= $photo; ?>" alt="<?= $product['title']; ?>" class="img-thumb-detailModal">

                <?php endforeach;?>
              </div>
            </div>

“class=”img thumb detailModal“>*/？>
“alt=”“class=“img thumb detailModal”>

我得到的结果如下：

我希望所有图像都显示在style=“width:280px；height:360px”框架中，并带有“下一步”和“上一步”按钮，以便当用户单击图像时，图像得到更改。我使用过fotorama，但它改变了我的CSS，我的客户也建议在jQUERY中构建它，而不是在他们的项目中使用fotorama

---

欢迎您提出宝贵的建议。

首先，您应该设置适当的CSS规则：

img {
    visibility: hidden;
    position: absolute;
}

.active-image {
    visibility: visible;
}

您应该将“活动图像”添加到第一个图像中，然后在单击时通过javascript将“活动图像”类分配给下一个图像

以此为例

HTML代码：

var slideIndex=0；
变量t；
//下一个/上一个控件
函数加滑块（n）{
显示幻灯片1_1（幻灯片索引+=n）；
}
//缩略图图像控件
功能当前幻灯片（n）{
显示幻灯片1\u 1（幻灯片索引=n）；
}
//-FUNZIONE幻灯片放映
功能显示幻灯片1_1（n）{
var i；
var幻灯片=$（“.mySlides”）；
变量点=$（“.dot”）；
如果（n>slides.length）{slideIndex=1}
如果（n<1）{slideIndex=slides.length}
对于（i=0；i

div.slideshow-container{
身高：100%；
位置：相对位置；
保证金：自动；
}
/*默认情况下隐藏图像*/
迈斯利德斯先生{
显示：无；
文本对齐：居中；
宽度：100%；
身高：100%；
位置：相对位置；
-webkit盒阴影：插图0 0 80px 50px#C4B4；
框阴影：插入0 0 80px 50px#C4B4；
}
/*下一步和上一步按钮*/
.prev，.next{
光标：指针；
位置：绝对位置；
最高：50%；
宽度：自动；
利润上限：-22px；
填充：16px；
颜色：白色；
字体大小：粗体；
字号：18px；
过渡：0.6s缓解；
边界半径：0 3px 3px 0；
}
/*将“下一步按钮”置于右侧*/
.下一个{
右：0；
边界半径：3px 0 3px；
}
/*在悬停时，添加一个黑色背景色，带有一点透明*/
.prev:悬停，.next:悬停{
背景色：rgba（0,0,0,0.8）；
}

❮
❯

您可以这样尝试：

PHP:

JS:

var slideIndex=1；
showDivs（slideIndex）；
函数plusDivs（n）{
showDivs（slideIndex+=n）；
}
函数showDivs（n）{
var i；
var x=document.getElementsByClassName（“stackSlides”）；
如果（n>x.length）{slideIndex=1}
如果（n<1）{slideIndex=x.length}
对于（i=0；i

---

选中此项以查看它是否起作用

无法获取。抱歉，现在对我来说太复杂了。我做的和你引导我做的完全一样，但是当我按下按钮时，所有的图像都消失了。你的PHP看起来很好。您可能在JS中写错了什么。在示例JSFIDLE中，没有“下一步”和“上一步”按钮。如果它们正在改变，那么我可以得到一些它们如何工作的提示，并可以在我的代码中实现它。在我的示例中，当你点击图像时，图像会改变。谢谢！我已经尝试过你的代码，当没有像codepen这样的php时，它工作得很好。但当我用php添加上述代码时，“上一步”和“下一步”按钮不起作用，只有图像显示在“下一步”和“上一步”按钮上。@Sarah您是如何集成js/css代码的（使用脚本/样式标记或在外部文件中）？

<div class="container-fluid">
  <div class="row stackGallery">

    <?php
      $photos = explode(',',$product['image']);
      foreach($photos as $photo):
    ?>

      <img class="img-thumb-detailModal stackButton" src="<?= $photo; ?>" alt="<?= $product['title']; ?>">

    <?php endforeach;?>

      <a class="stackButton sx" onclick="plusDivs(-1)">&#10094;</a>
      <a class="stackButton dx" onclick="plusDivs(1)">&#10095;</a>

  </div>
</div>

.stackGallery {
  padding: 20px;
  width: 280px;
  position: relative;
}
.stackSlides {
  display: none;
}
.stackButton {
  font-size: 25px;
  position: absolute;
  top: 180px;
  display: block;
  cursor: pointer;
}
.sx {
  left: 2px;
}
.dx {
  right: 2px;
}

var slideIndex = 1;
showDivs(slideIndex);

function plusDivs(n) {
  showDivs(slideIndex += n);
}

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