Последовательное переключение слайдов

#jquery

Как прописать последовательное переключение слайдов по клику на .prev и .next? То
есть, чтобы при клике на .next, всплывающее окно #popup-box-a заменялось на #popup-box-b
и т.д. При клике на .prev, соответственно, в обратную сторону.

И зациклить круг, чтобы после последнего открывалось #popup-box-a. Пробовала через
name.length, но я не очень дружу с jquery.

Вот кусочек кода.

$(document).ready(function() {


    $('body').append('
');
    $('body').append('
');
    $('body').append('
');
    $('body').append('
');
    $('body').append('
');
    $('body').append('
');
    $('body').append('
');
    $('body').append('
');
    $('body').append('
');
    $('body').append('
');
    $('body').append('

id="next-k"
');
    $('body').append('
');
    $('body').append('
');
    $('body').append('
');
    $('body').append('
');
    $('body').append('
');
    $('body').append('
');
    $('body').append('
');

    $('[class*=popup-link]').click(function(e) {

        e.preventDefault();
        e.stopPropagation();

        var name = $(this).attr('class');
        var id = name[name.length - 1];
        var scrollPos = $(window).scrollTop();

        $('#popup-box-'+id).show();
        $('#prev-'+id).show();
        $('#next-'+id).show();
        $('html,body').css('overflow', 'hidden');

        $('html').scrollTop(scrollPos);
    });

    

Ответы

Ответ 1

Ну зациклить можно как то так, если конечно я правильно понял задачу...



$(document).ready(function() {
    var imgSrcArr = [
        "../IMG/arts/ami.png", "../IMG/arts/chibi_chibi.jpg", "../IMG/arts/screaming.jpg",
        "../IMG/arts/knight.png", "../IMG/arts/nahraen.jpg", "../IMG/arts/regina.png",
        "../IMG/arts/rin.png", "../IMG/arts/luara.png", "../IMG/arts/moulin_rouge.jpg",
        "../IMG/arts/DA_contest.png", "../IMG/arts/owl.jpg", "../IMG/arts/eva.png",
        "../IMG/arts/me.jpg", "../IMG/arts/winter.jpg", "../IMG/arts/minako.jpg",
        "../IMG/arts/moon_fairy.jpg", "../IMG/arts/flower_fairy.png", "../IMG/arts/luara_and_cassandra.jpg"
    ];
  
    imgSrcArr.forEach(function(imgSrc, i) {
        var $domElemToAppend = $(
            '
prev
' +
            '
' +
            '
next
'
        );
        $('body').append($domElemToAppend);
        if (i + 1 < imgSrcArr.length) {
            $domElemToAppend.hide();
        };
    });
  
    $('.prev,.next').on('click', function(e) {
        var index = parseInt(e.target.id.split('-')[1]);
        var direction = (e.target.className == 'next') ? 1 : -1;
        var targetIndex = index + direction;
        if (targetIndex < 0) {
            targetIndex = imgSrcArr.length - 1;
        } else if (targetIndex > imgSrcArr.length - 1) {
            targetIndex = 0;
        };    
        var selector = '#prev-' + index + ',#next-' + index + ',#popup-box-' + index +
                       ',#prev-' + targetIndex + ',#next-' + targetIndex + ',#popup-box-'
+ targetIndex;
        $(selector).toggle();
    })  
});