Php 在幻灯片中来回单击

这是这样的，当你开始图片1时，当打开图片2时，你可以说“点击”，这样你就可以返回到现在的第1帧，在它再次出现之前，你必须等待更多的10张图片，但你可以点击返回到它

现在的问题是：我必须这样做，以便您可以在“图片”中来回单击，也就是说，一个在照片3中，并且希望返回到图片1，然后您可以通过单击返回

我试着用谷歌搜索一下，这样你就可以点击图片，然后你就可以来来回回了

这是我的代码，我将向您展示：

Php/mysqli

echo "<div id=\"slideshow\">";
    if ($stmt = $this->mysqli->prepare("SELECT navn, title FROM slideshow ORDER BY id DESC LIMIT 5")) { 
        $stmt->execute();

        $stmt->bind_result($navn, $title);

        while ($stmt->fetch()) {
        echo "<div>
        <img src=\"/indhold/img/tilbage.png\" id=\"tilbage\">
        <h3>$title</h3>
        <img src=\"/indhold/img/$navn\" alt=\"$title\" title=\"$title\">
        <img src=\"/indhold/img/frem.png\" id=\"frem\">
        </div>";
        }

        /* Luk statement */
        $stmt->close();

    } else {
        echo 'Der opstod en fejl i erklæringen: ' . $this->mysqli->error;
    }
    echo "</div>";

jquery代码如下：

#slideshow {
    width: 708px;
    float: right;
    margin-bottom: 42px;
    min-height: 99px;
}
#slideshow > div {
    position: absolute;

}
#slideshow > div h3 {
    position: absolute;
    bottom: -35px;
    padding: 11px;
    color: #ffffff;
    width: 97%;
    background-color: #002855;
}
#slideshow > div #tilbage {
    position: absolute;
    left: 6px;
    bottom: 35px;
    z-index: 1000;
}
#slideshow > div #frem {
    position: absolute;
    right: 6px;
    bottom: 35px;
    z-index: 1000;
}

<script>
        $(function() {
            $("#slideshow > div:gt(0)").hide();
            setInterval(function() { 
              $('#slideshow > div:first')
                .fadeOut(1000)
                .next()
                .fadeIn(1000)
                .end()
                .appendTo('#slideshow');
            },  9500);
        });
    </script>

$（函数（）{
$（“#幻灯片>div:gt（0）”）.hide（）；
setInterval（函数（）{
$（“#幻灯片>分区：第一个”）
.衰减（1000）
.next（）
法丹先生（1000）
(完)
.appendTo（“#幻灯片”）；
},  9500);
});

对于jQuery，我是个初学者，但可以说，我用这段代码创建了我的图像滚动条。我使用“上一步”和“下一步”按钮滚动浏览图像：

javascript:

  <script>
  var init = function () {
      var carousel = document.getElementById('carousel222'),
          navButtons = document.querySelectorAll('#navigationcaro222 button'),
          panelCount = carousel.children.length,
          transformProp = Modernizr.prefixed('transform'),
          theta = 0,

          onNavButtonClick = function (event) {
              var increment = parseInt(event.target.getAttribute('data-increment'));
              theta += (360 / panelCount) * increment * -1;
              carousel.style[transformProp] = 'translateZ( -182px ) rotateY(' + theta + 'deg)';
          };

      for (var i = 0; i < 2; i++) {
          navButtons[i].addEventListener('click', onNavButtonClick, false);
      }

  };

  window.addEventListener('DOMContentLoaded', init, false);

var init=函数（）{
var carousel=document.getElementById（'carousel222'），
navButtons=document.querySelectorAll（“#导航CARO222按钮”），
panelCount=carousel.children.length，
transformProp=Modernizer.前缀为（'transform'），
θ=0，
onNavButtonClick=函数（事件）{
var increment=parseInt（event.target.getAttribute（'data-increment'）；
θ+=（360/面板计数）*增量*-1；
旋转木马样式[transformProp]=“translateZ（-182px）rotateY（“+theta+”deg）”；
};
对于（变量i=0；i<2；i++）{
navButtons[i]。addEventListener（'click'，onNavButtonClick，false）；
}
};
addEventListener（'DOMContentLoaded'，init，false）；

然后对于我使用的HTML部分：

 <p id="navigationcaro222" style="padding-left:80px">
 <button id="previous2" data-increment="-1">Previous</button>
 <button id="next2" data-increment="1">Next</button>

以前的
下一个

希望这有帮助