Implementierung von jQuery .next() in eine einfache Bild-dia-show

jsFiddle ist hier: http://jsfiddle.net/qBQD4/

Es ist ziemlich einfach wirklich, ich will den Pfeil, um die Bilder vorwärts, Pfeil nach Links, verschieben Sie Sie nach hinten in eine einfache Diashow. Ich habe mehrere Diashows laufen auf der Seite, die diesen code umgesetzt wird, also warum ich gegangen bin .die next () - route anstatt nur die Angabe eines eindeutigen div-id. Der HTML-Code:

<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>

Und der jQuery-code ist:

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);});
});

Und schließlich, ein bisschen 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
}

Den 3. Funktion einwandfrei (ein Klick auf das Bild fortschreitet, um die nächste in der Reihe). Allerdings, die ersten beiden sind völlig gebrochen. Was habe ich falsch gemacht hier?

InformationsquelleAutor JVG | 2012-01-04

jquery next

3

In der prev und next Funktionen, die Sie vergessen haben, steigen Sie auf die angeklickte div parent, bevor Sie versuchen zu finden Ihre zugehörigen Galerie, d.h.:
```
var now = $(this).parent().next("ul.gallery").children(":visible")
```
Beispiel arbeiten an http://jsfiddle.net/alnitak/qBQD4/1/

FWIW, Sie sollten auch wirklich getrennt aus, um den Schritt in eine separate variable, und dann finden Sie die relevanten Bilder:
```
var gallery = $(this).parent().next("ul.gallery");
var first = gallery.children(':first');
```
Schön, prost. Habe in nur 2 min vor fflorent.

InformationsquelleAutor Alnitak
1

Wenn Sie verwenden .nächste(selector), Sie sind auf der Suche nach dem nächsten Geschwister passenden Selektor.
In anderen Worten, Sie sind auf der Suche für die nächsten Elemente auf der gleichen Ebene in den DOM-Baum.

Hier ist die korrigierte jsfiddle : http://jsfiddle.net/QALEE/

Alles, was Sie brauchen, ist die Verwendung von $(this).parent().nächste("ul.Galerie") werden auf dem guten Niveau wählen Sie den nächsten "ul.Galerie" element .

InformationsquelleAutor fflorent

Schrieb es in 20 Minuten..vielleicht haben einige inoffizielle codelines, aber funktioniert gut.
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>

Hoffe, dass dies helfen könnte, um jemanden einen Tag gespart.

InformationsquelleAutor mzonerz

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.