0

这样当你开始看图片 1 时，当打开图片 2 时，你可以说“点击”它，这样你就可以回到当前的第一帧，你必须在它之前等待更多的 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>
4

1 回答 1

0

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

希望这可以帮助。

于 2013-07-05T13:44:20.247 回答