Erstellen einer Diashow in jQuery (keine Bilder)

StackOverflow https://stackoverflow.com/questions/1404175

  •  05-07-2019
  •  | 
  •  

Frage

Ich habe ein paar div Elemente in einem Container div enthalten ist, und ich möchte durch sie gleiten, nur ein zu einer Zeit zeigt, und nach einer gewissen Zeit, schieben Sie die aktuell sichtbaren div nach links eine Animation verwendet wird, und schieben Sie in der nächsten div von rechts.

Meine HTML sieht etwa so aus: 

<div id="topMaps" style="height: 225px; overflow: hidden;">
  <div>First slide - some content here</div>
  <div>Second slide - some content here</div>
  <div>... slide - some content here</div>
  <div>n'th slide - some content here</div>
</div>

Ich verwende das folgende Skript für diese: 

var currentSlide = 1;
var numSlides = -1;
var slideSpeed = 1000;
var timePerSlide = 3500;

function nextSlide() {
    $('#topMaps div:nth-child(' + currentSlide + ')').hide("slide", { direction: "left" }, slideSpeed);
    currentSlide += 1;
    if (currentSlide >= numSlides)
        currentSlide = 1;
    $('#topMaps div:nth-child(' + currentSlide + ')').show("slide", { direction: "left" }, slideSpeed);

    setTimeout(nextSlide, timePerSlide);
}

$(document).ready(function() {
    numSlides = $('#topMaps div').length;
    setTimeout(nextSlide, timePerSlide);
});

Aber es funktioniert nicht. Wenn die nextSlide Funktion zum ersten Mal aufgerufen wird, meldet Firefox die folgenden Fehler: 

o.easing[this.options.easing || (o.easing.swing ? "swing" : "linear")] is not a function
http://localhost/templates/front/default/js/jquery.js
Line 19

Und wenn ich $('#topMaps div:nth-child(' + currentSlide + ')') im Watch-Panel in Firebug hinzufügen, gibt es eine Sammlung von 10 Elementen? Reall nicht sicher, was los ist.

Vielleicht kann mir jemand helfen?

Bearbeiten ich dachte, mit dem Wähler, das Problem, ich brauchte $('#topMaps>div:nth-child(' + currentSlide + ')') zu verwenden (man beachte die >). Es ist immer noch nicht, obwohl arbeiten.

War es hilfreich?

Lösung

Zwar nicht die Antwort, die Sie wurden zu wollen, haben Sie darüber nachgedacht, mit der Cycle-Plugin ?

Andere Tipps

ich empfehlen könnte, eine ID für jede div Einstellung und in der nextSlide () js Funktion, testen Sie die currentSlide Variable und wählen Sie das nächste div Aufruf Es ist kein gute Programmierung Dingen aber man kann es zumindest arbeiten, bis Sie herausfinden, was mit $ falsch ( ‚# topMaps div: n-te-Kind (‘ + currentSlide + ‚)‘)

Lizenziert unter: CC-BY-SA mit Zuschreibung
Nicht verbunden mit StackOverflow
scroll top