Javascript DIY滑块简单分页

我一直在搜索，但是我在文档中找不到关于这个的任何东西，除非我遗漏了什么。我正在使用这个简单的DIY滑块，我想让它显示当前的幻灯片

像这样：
五分之三

或者这个：
-X---

这里是否有一行简单的代码来实现这一点

$(".slider").diyslider({
   width: "400px",
   height: "200px",
   display: 1,
   loop: false,
});

$(".current-slide")

// use buttons to change slide
$("#go-left").bind("click", function(){
    $(".slider").diyslider("move", "back");
});
$("#go-right").bind("click", function(){
    $(".slider").diyslider("move", "forth");
});

这样试试

HTML代码：

<button id="go-left">&laquo;</button>
<button id="go-right">&raquo;</button>
<div class="slider">
<!-- The slider -->
  <div>
    <!-- A mandatory div used by the slider -->
    <!-- Each div below is considered a slide -->
    <div class="a">Div #1</div>
    <div class="b">Div #2</div>
    <div class="c">Div #3</div>
    <div class="d">Div #4</div>
    <div class="e">Div #5</div>
  </div>
</div>
<div id="counter">
  <!-- counter --> <span class="current-slide"></span> of <span class="total-slides"></span>
</div>
<div class="currentSlide"><span class="cur-slide"></span>
</div>

// hide the message when the slider ends moving, and update the counter

$(".slider").bind("moved.diyslider", function (event, slide, slideNumber) {
  slideNo = "";
  $("#counter .current-slide").text(slideNumber);
  curSlide = $("#counter .total-slides").text();
  index = 1;
  while (index <= curSlide) {
      if (index == slideNumber) slideNo += " " + slideNumber + " ";
      else slideNo += " - ";
      index++;
  }
  $(".cur-slide").text(slideNo);
});

// initialize the slider
$(".slider").diyslider({
   width: "400px",
   height: "200px",
   display: 1,
   loop: false,
   start: 1
});

//set the slider index initially to first slide
$(".cur-slide").text("1 - - - -");

// set the counter's slides count once the slider has been initialized
$("#counter .total-slides").text($(".slider").diyslider("getSlidesCount"));

// use buttons to change slide
$("#go-left").bind("click", function () {
  $(".slider").diyslider("move", "back");
});
$("#go-right").bind("click", function () {
  $(".slider").diyslider("move", "forth");
});

div {
  color: #000;
  font-size: 30px;
  line-height: 1.5em;
  font-weight: bold;
}
div.a {
   background: red;
}
div.b {
   background: green;
}
div.c {
   background: orange;
}
div.d {
   background: black;
   color: #fff;
}
div.e {
  background: pink;
}
.slider {
  border: 3px solid #000;
}

现场演示：

<button id="go-left">&laquo;</button>
<button id="go-right">&raquo;</button>
<div class="slider">
<!-- The slider -->
  <div>
    <!-- A mandatory div used by the slider -->
    <!-- Each div below is considered a slide -->
    <div class="a">Div #1</div>
    <div class="b">Div #2</div>
    <div class="c">Div #3</div>
    <div class="d">Div #4</div>
    <div class="e">Div #5</div>
  </div>
</div>
<div id="counter">
  <!-- counter --> <span class="current-slide"></span> of <span class="total-slides"></span>
</div>
<div class="currentSlide"><span class="cur-slide"></span>
</div>

// hide the message when the slider ends moving, and update the counter

$(".slider").bind("moved.diyslider", function (event, slide, slideNumber) {
  slideNo = "";
  $("#counter .current-slide").text(slideNumber);
  curSlide = $("#counter .total-slides").text();
  index = 1;
  while (index <= curSlide) {
      if (index == slideNumber) slideNo += " " + slideNumber + " ";
      else slideNo += " - ";
      index++;
  }
  $(".cur-slide").text(slideNo);
});

// initialize the slider
$(".slider").diyslider({
   width: "400px",
   height: "200px",
   display: 1,
   loop: false,
   start: 1
});

//set the slider index initially to first slide
$(".cur-slide").text("1 - - - -");

// set the counter's slides count once the slider has been initialized
$("#counter .total-slides").text($(".slider").diyslider("getSlidesCount"));

// use buttons to change slide
$("#go-left").bind("click", function () {
  $(".slider").diyslider("move", "back");
});
$("#go-right").bind("click", function () {
  $(".slider").diyslider("move", "forth");
});

div {
  color: #000;
  font-size: 30px;
  line-height: 1.5em;
  font-weight: bold;
}
div.a {
   background: red;
}
div.b {
   background: green;
}
div.c {
   background: orange;
}
div.d {
   background: black;
   color: #fff;
}
div.e {
  background: pink;
}
.slider {
  border: 3px solid #000;
}

---

快乐编码：）

？其他实例的第一个链接？这就是你想要的吗？谢谢大家@dreamweiver您的版本似乎有效，但它比实际添加的幻灯片多了一张。我最终得到了一个比我想象的要简单得多的代码：这就是我所需要的。只是出于好奇，有没有办法让幻灯片显示为“--X---”并用X标记当前幻灯片？@Pascal:我希望这是你所期待的，@dreamweiver哦，哈哈，我可能解释错了，对不起！我的意思是像第一张幻灯片“X-”，第二张“-X-”，第三张“--X-”，等等。每一张都代表一张幻灯片，然后把X放在当前幻灯片上。