добавление счетчика jquery slideshow

Question

Я использую слайд-шоу, которое я создал с 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/

спасибо за йо помогите!

Answer 1

Дайте каждому изображению идентификатор, например: 1,2,3, и покажите идентификатор, когда вы находитесь на этом изображении.

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

Fiddle here.

Answer 3

Просто добавьте счетчик и изменить HTML. Вот Fiddle.

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

Answer 4

Другой вариант

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

Множество вариантов, чтобы выбрать из

Answer 5

спасибо много. Я буду использовать первый вариант, @ Хираль. У меня есть еще одно слайд-шоу на моем веб-сайте, и, когда я пытаюсь использовать другие варианты, он не работает нормально ... но большое спасибо всем!

У меня есть еще одна вещь, чтобы исправить. когда у меня есть 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> 

Большое спасибо