2

我正在使用我用 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 链接：http: //jsfiddle.net/XRpeA/3/

非常感谢你的帮助 ！

4

5 回答 5

2

写这个：

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

在这里拉小提琴。

于 2013-11-12T17:21:56.740 回答
1

只需添加一个计数器并更改 html。这是一个小提琴。

var counter = 1;
$("#counter").html("image "+counter+"/3");
$slides.click(function(){
    // stores the currently-visible slide
    var $current = $(this);    
    if( $current.is($slides.last()) ) {
        $current.hide();
        $slides.first().show();
        counter = 1;
        $("#counter").html("image "+counter+"/3");
    } 
    // else, hide current slide and show the next one
    else {
        counter++;
        $current.hide().next().show(); 
        $("#counter").html("image "+counter+"/3");
    }
});
于 2013-11-12T17:22:44.930 回答
1

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

我还有一件事要解决。当我的页面上有 2 或 3 个幻灯片时，它不起作用......我在我的管理页面中使用了转发器自定义字段，所以我无法提前知道我需要多少幻灯片...... . 有谁知道我该如何解决？这是一个jsfiddle：http: //jsfiddle.net/XRpeA/13/

<div id="slideframe">
    <img class="image_news" src="http://s1.lemde.fr/image/2007/07/09/534x0/933544_5_aa6d_polynesie-bora-bora_0608bcead896ce3f59fc0e2fb3cc7435.jpg" />
    <img class="image_news" src="http://production.slashmedias.com/main_images/images/000/005/357/IMAGE-PENSEE-HD-1_original_original_large.jpg?1372235419" />
    <img class="image_news" src="http://images.telerama.fr/medias/2013/03/media_94814/une-image-un-film-l-auberge-de-dracula-1931,M106823.jpg" />
</div>
<br>
    <div id="counter">image <span id="current">1</span> / <span id="total"></span></div>

 <br><br>

<div id="slideframe">
<img class="image_news" src="http://s1.lemde.fr/image/2007/07/09/534x0/933544_5_aa6d_polynesie-bora-bora_0608bcead896ce3f59fc0e2fb3cc7435.jpg" />
<img class="image_news" src="http://production.slashmedias.com/main_images/images/000/005/357/IMAGE-PENSEE-HD-1_original_original_large.jpg?1372235419" />
<img class="image_news" src="http://images.telerama.fr/medias/2013/03/media_94814/une-image-un-film-l-auberge-de-dracula-1931,M106823.jpg" />
</div>
<br>
<div id="counter">image <span id="current">1</span> / <span id="total"></span></div>

多谢

于 2013-11-12T18:04:10.863 回答
0

另外的选择

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

有很多选项可供选择

于 2013-11-12T17:49:17.577 回答
0

为每个图像指定一个 id，例如：1,2,3 并在您使用该图像时显示该 id。

于 2013-11-12T17:19:30.787 回答