Question

我一直在寻找，但我在文档中找不到任何相关内容，除非我遗漏了一些东西。我正在使用这个简单的DIY Slider http://jsfiddle.net/kGRRK/，我想让它显示当前的幻灯片。

像这样：
3/5

或者这个：
- - 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");
});

Answer 1

试试这种方式

HTML CODE：

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

JS CODE：

// 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");
});

<强> CSS：

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

现场演示：http://jsfiddle.net/dreamweiver/CGBVF/20/

快乐编码：）

DIY滑块简单的分页

1 个答案: