Javascript 向jquery幻灯片添加计数器

我正在使用我用Javascript为我的网站制作的幻灯片。 我想加一个柜台

第1页，共3页

幻灯片1/总幻灯片

我找不到解决办法

这是我的密码：

$(document).ready(function() {
    // set display:none for all members of ".pic" class except the first
    $('.image_news:gt(0)').hide();

    // stores all matches for class="pic"
    var $slides = $('.image_news');

    $slides.click(function(){
        // stores the currently-visible slide
        var $current = $(this);    
        if( $current.is($slides.last()) ) {
            $current.hide();
            $slides.first().show();
        } 
        // else, hide current slide and show the next one
        else {
            $current.hide().next().show(); 
        }
    });
});

和一个fsfiddle链接，示例如下：

---

非常感谢你的帮助

给每个图像一个id，例如：1、2、3，并在该图像上显示id

给每个图像一个id，例如：1、2、3，并在该图像上显示id

写下：

var count = $('.image_news').length; //length gives total length of elements
$("#total").text(count);

if ($current.is($slides.last())) {
    $("#current").text("1");//first slide
    $current.hide();
    $slides.first().show();
}
// else, hide current slide and show the next one
else {
    $("#current").text($current.next().index()+1); 
    //index() returns index, add 1 because it starts from 0
    $current.hide().next().show();
}

写下以下内容：

var count = $('.image_news').length; //length gives total length of elements
$("#total").text(count);

if ($current.is($slides.last())) {
    $("#current").text("1");//first slide
    $current.hide();
    $slides.first().show();
}
// else, hide current slide and show the next one
else {
    $("#current").text($current.next().index()+1); 
    //index() returns index, add 1 because it starts from 0
    $current.hide().next().show();
}

---

只需添加一个计数器并更改html即可。这是一本书

---

只需添加一个计数器并更改html即可。这是一本书

另一种选择

    // stores the currently-visible slide
    var $current = $(this);
    $current.hide();
    if( $current.is($slides.last()) ) 
    {
        $current = $slides.first();
    } 
    // else, hide current slide and show the next one
    else 
    {
        $current = $current.next();
    }
    $current.show();
    $('#counter').text('image ' + ($slides.index($current) + 1) + ' / ' + $slides.length);

有很多选项可供选择

另一个选项

    // stores the currently-visible slide
    var $current = $(this);
    $current.hide();
    if( $current.is($slides.last()) ) 
    {
        $current = $slides.first();
    } 
    // else, hide current slide and show the next one
    else 
    {
        $current = $current.next();
    }
    $current.show();
    $('#counter').text('image ' + ($slides.index($current) + 1) + ' / ' + $slides.length);

有很多选项可供选择，非常感谢。 我将使用第一个选项@Hiral。我有另一个幻灯片在我的网站上，当尝试其他选项，它的工作不好。。。但是非常感谢大家

我还有一件事要解决。当我有2或3个幻灯片在我的页面上，它不工作。。。 我在我的管理页面中使用了一个转发器自定义字段，所以我无法提前知道我需要多少幻灯片。。。 有人知道我怎么修吗？ 下面是一个JSFIDLE：

图1/





图1/

非常感谢

非常感谢。 我将使用第一个选项@Hiral。我有另一个幻灯片在我的网站上，当尝试其他选项，它的工作不好。。。但是非常感谢大家

我还有一件事要解决。当我有2或3个幻灯片在我的页面上，它不工作。。。 我在我的管理页面中使用了一个转发器自定义字段，所以我无法提前知道我需要多少幻灯片。。。 有人知道我怎么修吗？ 下面是一个JSFIDLE：

图1/





图1/

非常感谢