Нужна помощь в реализации цикла jQuery For для создания слайдера, который изменяет слайды, добавляя новые классы CSS

Question

Нужна помощь в реализации цикла jQuery For для создания слайдера, который изменяет слайды, добавляя новые классы CSS

0

Вот то, что у меня есть сейчас:

HTML:

<div class="slides">
    <div class="slide1-img">
    </div>
</div>

JQuery:

$(function doAnimation(){
    $('.slide1-img').delay(1000).fadeOut(500, function(){
        for(n=1; n<=3; n++){
            $(this).addClass('slide' + n + '-img').fadeIn(500).delay(1000).fadeOut(500)
        };
    });
});

CSS:

.slides {
width: 100%;
height: 300px;
overflow: hidden;
}

.slide1-img {
background: url(http://us.123rf.com/400wm/400/400/konradbak/konradbak1103/konradbak110300502/9188750-beautiful-lady-with-long-brown-hair.jpg) 0 0 no-repeat;
width: 100%;
height: 100%;
background-size: cover;
}


.slide2-img {
background: url(http://us.123rf.com/450wm/itrifonov/itrifonov1210/itrifonov121000202/15752531-closeup-portrait-of-a-beautiful-young-woman-with-elegant-long-shiny-hair--concept-hairstyle.jpg) 0 0 no-repeat;
width: 100%;
height: 100%;
background-size: cover;
}


.slide3-img {
background: url(http://us.123rf.com/450wm/subbotina/subbotina1307/subbotina130700109/20793602-beauty-woman-touching-her-long-and-healthy-brown-hair.jpg) 0 0 no-repeat;
width: 100%;
height: 100%;
background-size: cover;
}

В настоящее время он, как представляется, добавляет классы slide2-img и slide3-img в одно и то же время, а не работает через каждый из них за раз. Я хочу, чтобы каждый из них запускал по одному (так что каждое из трех изображений должно исчезать и выходить, пока не появится следующий).

Кроме того, я хочу, чтобы это контур бесконечно, поэтому те же 3 снимка будут вращаться.

Brenton Thornicroft 09 март 2014, в 01:19

Источник

Теги:

javascript

jquery

for-loop

slider

infinite-loop

2 ответа

0

Вы можете сделать это с помощью setInterval:

var i = 1;
var theImage = $(".slide1-img");

setInterval(function () {
    console.log(theImage[0].className);
    theImage.fadeOut(500, function () {
       $(this).removeClass().addClass('slide' + i + '-img').fadeIn(500); 
    });

    i++;

    if (i === 4) {
       i = 1;
    }
}, 2000);

скрипка

Bic 08 март 2014, в 23:27

Ещё вопросы

adeneo · Accepted Answer · 2014-03-08T22-36-00.000Z

Вероятно, вы пытаетесь сделать что-то большее

$(function() {
    var i = 1;
    (function doAnimation(){
        $('.slide'+i+'-img').delay(1000).fadeOut(500, function(){
            $(this).attr('class', 'slide' + (i = i==3 ? 1 : i+1) + '-img').fadeIn(500, doAnimation);
        });
    })();
});

FIDDLE

просто повторяя класс с переменной внутри повторяющейся функции.