Question

这样，当你开始拍照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>

Answer 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>

希望这有帮助。

通过幻灯片来回点击

1 个答案: