jQuery добавляет значение z-index к серии изображений

Question

Простая концепция, но я не могу придумать элегантное решение.

У меня есть серия изображений в галерее, и количество внутри изменится. Я написал короткий сценарий, который проходит через слайд-шоу, затухая видимое изображение со следующим под ним. Концептуально он идеален, но над 2 изображениями он становится шатким, потому что все «следующие» изображения находятся в одном и том же z-индексе.

Существует ли простой скрипт, который может считать фотографии и добавлять к ним прогрессивный z-индекс? Например: в галерее 10 изображений, и они присваивают им z-индексы от -1 до -10.

Спасибо за вашу помощь!

jsFiddle: http://jsfiddle.net/danielredwood/mmPZN/

HTML:

<img class="slide first" src="img/diamond-test.jpg" />
<img class="slide" src="img/diamond-test2.jpg" />
<img class="slide" src="img/diamond-test3.jpg" />

CSS:

.slide {
  top:100px;
  position:absolute;
  z-index:-1;
}
.first {
  display:block;
  position:static;
}

JavaScript:

$('.slide').click(function(){
    var pic = $(this);
    pic.fadeOut(400, function(){
        pic.next().addClass('first');
        pic.insertAfter('.slide:last').removeClass('first').show();
    });    
});

Answer 1

почему бы просто не установить видимость, чтобы скрыть все, кроме той, на которую вы хотите посмотреть? z-index не всегда хорошо работает в определенных браузерах

Answer 2

Вам не нужно складывать все изображения. Вам просто нужен контейнер и изображение. Первое изображение - это фон, затем одно изображение поверх него. Украсьте изображение сверху, затем сделайте его фоновым. Скройте изображение, поменяйте SRC на следующее изображение. Появление и повтор.

Пример демонстрирует технику. Ваш будет работать немного по-другому, потому что у вас есть несколько изображений. Та же идея, хотя.

См .: http://jsfiddle.net/Diodeus/gYyBL/

Answer 3

Выяснилось, как исправить, не нужно последовательно z-индексировать все изображения.

См. Здесь: http://jsfiddle.net/danielredwood/mmPZN/1/

JavaScript:

$('.slide:first').addClass('first').next().addClass('second');
$('.slide').click(function(){
    var pic = $(this);
    pic.fadeOut(400, function(){
    pic.next().removeClass('second').addClass('first').next().addClass('second');
        pic.insertAfter('.slide:last').removeClass('first').show();
    });    
});