Mehrere Jquery simple Slider auf einer Seite

Erstellt habe ich meine erste Jquery content slider (dots + Folien). Es funktioniert gut, aber ich kann, implementieren Sie zwei Schieberegler auf einer Seite.
Wie rufen Sie die Funktion auf zwei ids?
Ich habe gerade angefangen zu lernen, JS, so brauche ich nur die beiden Potis zum arbeiten, nicht um Sie besser zu machen etc.
Dank

<div class="slider"  id="slider">
    <div class="slides">
                 <!-- ... -->
    </div>
</div>

<div class="slider"  id="slider2">
    <div class="slides">
                    <!-- ... -->
    </div>
</div>

JS

(function($) {
    $.fn.slajder = function() {
        return this.each(function() {

    slider = $(this);
    slider.prepend('<nav class=\"dots"><span></span><span></span></nav>');

    slides = slider.children(".slides");
    dots = slider.children(".dots");
    dot = dots.children("span");
    dot1 = dots.children("span:first-child");
    dot2 = dots.children("span:nth-child(2)");

    dot1.click(function(){
        slides.animate({
            top: '10px',
        }, 600, function() {
        //Animation complete.

        });
        dot.css("-webkit-box-shadow","#444 0 1px 1px 0px");
        $(this).css("-webkit-box-shadow","#444 0 -1px 1px 0px");
    });
    dot2.click(function(){
        slides.animate({
            top: '-130px',
        }, 600, function() {
        //Animation complete.

        });
        dot.css("-webkit-box-shadow","#444 0 1px 1px 0px");
        $(this).css("-webkit-box-shadow","#444 0 -1px 1px 0px");
    });


        });
    };
}(jQuery));

//this one goes at bottom of a page in script tags
$(document).ready(function() {
 $('#slider').slajder();
});

- Und fiddle - http://jsfiddle.net/lima_fil/CK2jS/

  • Die common-Selektor wird der class "slider", so $('.slider').slajder();
InformationsquelleAutor lima_fil | 2013-05-01
  1. 1

    Erste, was zuerst. Zum anwenden dieser code, um beide mit dem Namen slider-divs, können Sie dies tun:

    $(document).ready(function() {
    $('#slider').slajder();
    $('#slider2').slajder();
});

    So setzen Sie den Schieberegler Funktionalität auf jedem der zwei Blöcke, getrennt.

    (gillyspy die eine Zeile Weg, dies zu tun ist besser; ich habe Sie getrennt, nur weil es macht das Konzept mehr offensichtlich)

    Versuchen, die als erste in Ihrer fiddle. Es wird nicht ganz funktionieren, aber es wird scheitern auf eine interessante Weise, so gehen Sie vor und schauen Sie es.

    Tasten waren auf den zweiten block. Um zu verstehen, warum, müssen Sie wissen, über den Gültigkeitsbereich von Variablen in Javascript. (Es gibt viele Erklärungen gibt; man ist http://www.digital-web.com/articles/scope_in_javascript/). Die einfache Erklärung ist hier jedoch, ist, dass die Variablen werden implizit deklariert haben globalen scope. Das bedeutet, dass, wenn Sie angewendet die slajder-Funktion, um den zweiten block, der implizit deklarierte Variablen drin waren global und überschrieb die (Globale) diejenigen, erklärt für den ersten block.

    Die Lösung ist, deklarieren Sie mit 'var', so werden Sie vor Ort:

    var slides = slider.children(".slides");
var dots = slider.children(".dots");
var dot = dots.children("span");
var dot1 = dots.children("span:first-child");
var dot2 = dots.children("span:nth-child(2)");

    dot3 und dot4 in der Geige, als Sie zu haben scheinen, schon klar, fremde...Sie brauchen Sie nicht.

    • Danke für Ressourcen und helfen.
    InformationsquelleAutor S McCrohan
Schreibe einen Kommentar