Переходы изображения jQuery

Question

Я не могу понять, что мне нужно сделать здесь. Я пытаюсь сделать так, чтобы создать слайд-шоу с простым изображением, и я пытаюсь понять, как заставить его работать. Это не работает через цикл for, и я не понимаю, почему. Вот скрипка моего кода: http://jsfiddle.net/xnEGt/.

Answer 1

Здесь: http://jsfiddle.net/xnEGt/6/

Что было не так:

1. Изображения сначала должны быть скрыты с помощью CSS, только первое изображение видимого
2. При использовании для цикла все изображения будут отображаться только один раз , Обратите внимание, что .delay() не влияет на цикл так, все итерации будут сделаны сразу
3. Вы можете решить эту проблему с помощью рекурсивной реализации с использованием SetTimeout

4. .get(0) и .get(1) селекторы были также неправильно, используйте nth-child(i) вместо.

   var slideCount = $('.slider div.slide').length; 
   nextPic(0); 
   
   function nextPic(i){ 
   
       var next = (i+1)%(slideCount+1); 
   
       $('.slider div:nth-child('+i+')').fadeOut(100); 
       $('.slider div:nth-child('+next+')').fadeIn(100); 
   
       setTimeout(function(){nextPic(next);},1000); 
   } 
   

   Или более компактная реализация с использованием .get() селекторов: http://jsfiddle.net/xnEGt/7/