Question

您好有谁知道如何在这个幻灯片中添加一个计数器（即1 / 12,2 / 12,3 / 12等）？

http://www.switchonthecode.com/tutorials/jquery-creating-a-slideshow

另外，我想选择另一个按钮，在幻灯片放映期间的任何给定点将用户带回第一张图像。

对此的任何帮助都将非常感激。

谢谢！

Answer 1

以下内容适用于创建计数器：

新HTML

<div id="slideshow-area">
  <div id="slideshow-scroller">
    ... slideshow holder html (same as in the example) ...
  </div>
  <div id="slideshow-previous"></div>
  <div id="slideshow-next"></div>
  <div id="slideshow-counter"></div>
  <div id="slideshow-reset"></div>
</div>

其他CSS

#slideshow-counter {
    width: 100%;
    height: 50px;
    position: absolute:
    left: 0;
    bottom: 0;
}

其他Javascript

function updateCounter() {
    $('#slideshow-counter').html(currentSlide + "/" + totalSlides);
}

function showFirstSlide() {
    currentSlide = 1;
    updateContentHolder();
    updateButtons();
    updateCounter();
}

然后在document.ready，showPreviousSlide和showNextSlide

中调用updateCounter();后，在新行中添加updateButtons()

同样在$(document).ready()功能中，您需要添加以下行：$("#slideshow-reset").click(showFirstSlide)

在幻灯片中添加计数器

1 个答案: