За последние 24 часа нас посетили 32943 программиста и 1756 роботов. Сейчас ищут 829 программистов ...

Слайд шоу на .each jquery

Тема в разделе "JavaScript и AJAX", создана пользователем Skyers, 10 ноя 2010.

  1. Skyers

    Skyers Активный пользователь

    С нами с:
    1 май 2009
    Сообщения:
    54
    Симпатии:
    0
    Задача сделать слайд шоу - сначала одна картинка появилась и исчезла, потом вторая и т.д.

    Есть блок куда выводить картинки, есть блок с картинками...
    вот пытаюсь перебрать эти картинки по очереди и вывести по очереди в блоке для вывода...
    а выходит что они все появляюца однавременно в нем... помогите решить проблему, устал бороться....
    HTML:
    1.  
    2. <div id="bigimage"></div>
    3.          <div id="small">
    4.             <img id="img_1" src="images/car4.jpg"  alt="" />
    5.             <img id="img_2" src="images/car2.jpg"  alt="" />
    6.             <img id="img_3" src="images/car3.jpg"  alt="" />
    7.             <img id="img_4" src="images/car1.jpg"  alt="" />
    8.          </div>
    9.  
    Вот сам скрипт

    [js]
    $(function() {
    $('#small').hide();
    $('#small').each (function () {
    $('#bigimage').prepend($(this).fadeIn(3000).delay(2000).fadeOut(3000));
    });

    });
    [/js]
    На сколько можно судить из описания метода .each, он по порядку перебирает элементы блока... но почему то в итоге всеравно выводит все одновременно...

    Так же другой способ ... результат тот же, все картинки появляются и исчезают одновременно...
    [js]
    for (var i=0; i<5;i++) {
    $('#big').prepend($('#img_' + i).fadeIn(3000).fadeOut(3000).delay(2000));
    }
    [/js]

    и попутно обьясните одну вещь...
    когда я выбираю
    [js] $('#small')[/js]
    я же получаю массив обьектов ?
    т.е. [js]var arr=$('#small');[/js]
    но почему тогда все методы и свойства для массивов не пременимы к arr (arr.lenght выдает андефининг... )
     
  2. Johnatan

    Johnatan Активный пользователь

    С нами с:
    6 мар 2008
    Сообщения:
    508
    Симпатии:
    0
    Адрес:
    Испания
    [js]var i = 0;
    $(function(){
    $('#small img').hide();
    var int = setInterval("showpic(i)",500);
    });
    function showpic() {
    var imgs = $('#small img').length;
    if (i >= imgs) {
    clearInterval(int);
    }
    $('#small img:hidden').eq(0).fadeIn(1000);
    i++;
    }[/js]

    Можно допилить немного до необходимой кондиции. Код не проверялся, писал его прямо тут.