6

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

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

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

$(document).ready(function() {


    $('body').append('<div class="prev" id="prev-a"></div><div class="popup-box" id="popup-box-a"><img class="artbigpic" src="../IMG/arts/ami.png" /></div><div class="next" id="next-a"></div>');
    $('body').append('<div class="prev" id="prev-b"></div><div class="popup-box" id="popup-box-b"><img class="artbigpic" src="../IMG/arts/chibi_chibi.jpg" /></div><div class="next" id="next-b"></div>');
    $('body').append('<div class="prev" id="prev-c"></div><div class="popup-box" id="popup-box-c"><img class="artbigpic" src="../IMG/arts/screaming.jpg" /></div><div class="next" id="next-c"></div>');
    $('body').append('<div class="prev" id="prev-d"></div><div class="popup-box" id="popup-box-d"><img class="artbigpic" src="../IMG/arts/knight.png" /></div><div class="next" id="next-d"></div>');
    $('body').append('<div class="prev" id="prev-e"></div><div class="popup-box" id="popup-box-e"><img class="artbigpic" src="../IMG/arts/nahraen.jpg" /></div><div class="next" id="next-e"></div>');
    $('body').append('<div class="prev" id="prev-f"></div><div class="popup-box" id="popup-box-f"><img class="artbigpic" src="../IMG/arts/regina.png" /></div><div class="next" id="next-f"></div>');
    $('body').append('<div class="prev" id="prev-g"></div><div class="popup-box" id="popup-box-g"><img class="artbigpic" src="../IMG/arts/rin.png" /></div><div class="next" id="next-g"></div>');
    $('body').append('<div class="prev" id="prev-h"></div><div class="popup-box" id="popup-box-h"><img class="artbigpic" src="../IMG/arts/luara.png" /></div><div class="next" id="next-h"></div>');
    $('body').append('<div class="prev" id="prev-i"></div><div class="popup-box" id="popup-box-i"><img class="artbigpic" src="../IMG/arts/moulin_rouge.jpg" /></div><div class="next" id="next-i"></div>');
    $('body').append('<div class="prev" id="prev-j"></div><div class="popup-box" id="popup-box-j"><img class="artbigpic" src="../IMG/arts/DA_contest.png" /></div><div class="next" id="next-j"></div>');
    $('body').append('<div class="prev" id="prev-k"></div><div class="popup-box" id="popup-box-k"><img class="artbigpic" src="../IMG/arts/owl.jpg" /></div><div class="next"> id="next-k"</div>');
    $('body').append('<div class="prev" id="prev-l"></div><div class="popup-box" id="popup-box-l"><img class="artbigpic" src="../IMG/arts/eva.png" /></div><div class="next" id="next-l"></div>');
    $('body').append('<div class="prev" id="prev-m"></div><div class="popup-box" id="popup-box-m"><img class="artbigpic" src="../IMG/arts/me.jpg" /></div><div class="next" id="next-m"></div>');
    $('body').append('<div class="prev" id="prev-n"></div><div class="popup-box" id="popup-box-n"><img class="artbigpic" src="../IMG/arts/winter.jpg" /></div><div class="next" id="next-n"></div>');
    $('body').append('<div class="prev" id="prev-o"></div><div class="popup-box" id="popup-box-o"><img class="artbigpic" src="../IMG/arts/minako.jpg" /></div><div class="next" id="next-o"></div>');
    $('body').append('<div class="prev" id="prev-p"></div><div class="popup-box" id="popup-box-p"><img class="artbigpic" src="../IMG/arts/moon_fairy.jpg" /></div><div class="next" id="next-p"></div>');
    $('body').append('<div class="prev" id="prev-q"></div><div class="popup-box" id="popup-box-q"><img class="artbigpic" src="../IMG/arts/flower_fairy.png" /></div><div class="next" id="next-q"></div>');
    $('body').append('<div class="prev" id="prev-r"></div><div class="popup-box" id="popup-box-r"><img class="artbigpic" src="../IMG/arts/luara_and_cassandra.jpg" /></div><div class="next" id="next-r"></div>');

    $('[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);
    });
aleksandr barakin
  • 68,117
БелыйКролик
  • 61

1 Answers1

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 = $(
        '&lt;div class="prev" id="prev-' + i + '"&gt;prev&lt;/div&gt;' +
        '&lt;div class="popup-box" id="popup-box-' + i + '"&gt;&lt;img class="artbigpic" src="' + imgSrc + '" alt="' + imgSrc + '"/&gt;&lt;/div&gt;' +
        '&lt;div class="next" id="next-' + i + '"&gt;next&lt;/div&gt;'
    );
    $('body').append($domElemToAppend);
    if (i + 1 &lt; 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 &lt; 0) {
        targetIndex = imgSrcArr.length - 1;
    } else if (targetIndex &gt; imgSrcArr.length - 1) {
        targetIndex = 0;
    };    
    var selector = '#prev-' + index + ',#next-' + index + ',#popup-box-' + index +
                   ',#prev-' + targetIndex + ',#next-' + targetIndex + ',#popup-box-' + targetIndex;
    $(selector).toggle();
})  



});
<body><script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script></body>
Vyacheslav Danshin
  • 1,342