在幻灯片中来回单击答案

【问题标题】：click back and forth through the slideshow在幻灯片中来回单击
【发布时间】：2013-07-05 13:35:09
【问题描述】：

这样当你开始看图 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>";

这里的css代码：

#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;
}

这里的jquery代码：

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

【问题讨论】：

标签： php jquery css mysqli

【解决方案1】：

我是 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);

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

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

希望这会有所帮助。

【讨论】：