Реализация jQuery .next () в простом слайд-шоу изображений - PullRequest
Новая
       1

Реализация jQuery .next () в простом слайд-шоу изображений

4 голосов
/ 04 января 2012

jsFiddle здесь: http://jsfiddle.net/qBQD4/

Это довольно просто на самом деле; Я хочу, чтобы стрелка вправо перемещала изображения вперед, а стрелка влево - в обратном направлении в виде простого слайд-шоу. У меня есть несколько слайд-шоу на странице, на которой будет реализован этот код, поэтому я пошел по пути .next (), а не просто указал уникальный идентификатор div. HTML-код: 

<div class="media">
    <div class="slideButtons">
        <span class="prev"><</span>
        <span class="next">/ ></span>
    </div>
    <ul class="gallery" id="olympGallery">
        <li><img src="http://i.imgur.com/8aA7W.jpg" alt="" title="" /></li>
        <li><img src="http://i.imgur.com/jE7vj.jpg" alt="" title="" /></li>
        <li><img src="http://i.imgur.com/L7lVg.jpg" alt="" /></li>
    </ul>
</div>

И код jQuery: 

var speed = 100;

$(".prev").click(function() {
    var now = $(this).next("ul.gallery").children(":visible"),
        last = $(this).next("ul.gallery").children(":last"),
        prev = now.prev();
        prev = prev.index() == -1 ? last : prev;
    now.fadeOut(speed, function() {prev.fadeIn(speed);});
});

$(".next").click(function() {
    var now = $(this).next("ul.gallery").children(':visible'),
        first = $(this).next("ul.gallery").children(':first'),
        next = now.next();
        next = next.index() == -1 ? first : next;
    now.fadeOut(speed, function() {next.fadeIn(speed);});
});

$(".gallery li").click(function() {
    var first = $(this).parent().children(':first'),
        next = $(this).next();
        next = next.index() == -1 ? first : next;
    $(this).fadeOut(speed, function() {next.fadeIn(speed);});
});

И, наконец, немного CSS: 

.prev, .next {position: relative; padding: 3px; font-size:50px; font-weight: 900; cursor:pointer;
}

.gallery li{display:none; list-style:none;}
.gallery li:first-child {display:block;}

.gallery img {
    max-height:550px
}

3-я функция работает нормально (нажатие на изображение переходит к следующему в серии). Однако первые два полностью сломаны. Что я тут не так сделал?

Ответы [ 3 ]

3 голосов
/ 04 января 2012

В предыдущей и следующей функциях вы забыли подняться к родительскому элементу выбранного клика, прежде чем пытаться найти связанную с ним галерею, т.е. 

var now = $(this).parent().next("ul.gallery").children(":visible")

Рабочий образец при http://jsfiddle.net/alnitak/qBQD4/1/

FWIW, вы также должны выделить этот шаг в отдельную переменную, а затем найти соответствующие изображения: 

var gallery = $(this).parent().next("ul.gallery");
var first = gallery.children(':first');
1 голос
/ 04 января 2012

Когда вы используете .next ( селектор ), вы ищете следующих братьев и сестер, соответствующих селектору.Другими словами, вы ищете следующие элементы на том же уровне в дереве DOM.

Вот исправленный jsfiddle: http://jsfiddle.net/QALEE/

Все, что вам нужно, это использовать $ (это) .parent (). next ("ul.gallery"), чтобы быть на хорошем уровне для выбора следующего элемента "ul.gallery".

0 голосов
/ 23 марта 2016

Написал за 20 минут. Может быть, есть неофициальные строки кода, но работает нормально. JS 

        $(document).ready(function () {

        var currentBox=0;

        $("#Right").click(function () {

            var tobox = $(".mainbox").length;
            if(currentBox<tobox-1){
            if (currentBox == 0)
            {
                //if the first slide 
                $(".mainbox:nth(0)").hide();
                $(".mainbox:nth(1)").show();
                currentBox = currentBox + 1;
                //alert("to right:" + tobox +currentBox) ;
            }
            else {

                currentBox = currentBox + 1;
                var h = currentBox - 1;
                var s = currentBox;
                $(".mainbox:nth(" + h + ")").hide();
                $(".mainbox:nth(" + s + ")").show();

                //alert("to right:" + tobox + currentBox);

            }
            } else {
                $(".mainbox:nth(0)").show();
                var a = tobox - 1;
                $(".mainbox:nth(" + a + ")").hide();
                currentBox = 0;
                //alert("end");
            }


        });

        $("#Left").click(function () {



                var tobox = $(".mainbox").length;
                if (currentBox == 0)
                {//if the last slide

                    var a = tobox - 1;
                    $(".mainbox:nth(" + a + ")").show();
                    $(".mainbox:nth(0)").hide();
                    currentBox = a;
                   // alert("to left:" + tobox +currentBox) ;
                }
                else
                {
                   // alert("Current box:"+ currentBox);
                   // 
                    var h = currentBox;
                    var s = currentBox-1;
                    $(".mainbox:nth(" +h+ ")").hide();
                    $(".mainbox:nth(" + s + ")").show();

                   // alert("to right:" + tobox + currentBox);
                    currentBox = currentBox - 1;

                }
            //else { alert("end"); }


            });
        });


</script>

HTML 

    <div class="sliderOutbx">

    <div class="Content">
        <div class="NavLeft"><span id="Left">Left</span></div>

        <div class="mainbox">
            <div class="box">1</div>
            <div class="box">2</div>
        </div>
        <div class="mainbox" style="display:none;">
            <div class="box">3</div>
            <div class="box">4</div>
        </div>
        <div class="mainbox" style="display:none;">
            <div class="box">5</div>
            <div class="box">6</div>
        </div>

        <div class="NavRight"><span id="Right">Right</span></div>
    </div>

</div>

Надеюсь, это поможет кому-то сэкономить день.

...