DIY滑塊簡單分頁

Question

我一直在尋找，但我在文檔中找不到任何關於此的東西，除非我錯過了一些東西。我正在使用這個簡單的DIY滑塊http://jsfiddle.net/kGRRK/，我希望它顯示當前幻燈片。

像這樣：5

或者這
3：
- - 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代碼：

<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代碼：

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

編碼快樂:)