jQuery-Schieberegler mit Hover-Navigation und Pause - nicht mit Plugin-Jquery

In meinen späteren Tagen, in denen ich jQuery so roh wie möglich geschrieben habe und nicht viele jQuery-Plugins meine Seite auf- und abgebremst haben, versuche ich, meinen eigenen Schieberegler zu erstellen.

Ich habe herausgefunden, wie weit ich bisher gekommen bin.

Mein HTML-Markup ist nicht dynamisch - und der Folienanimationsprozess ist nur positionell.

Die Komplikationen, die ich habe, sind, dass die Animationen vollständig ausgeführt werden müssen, bevor die nächste Animation beginnen kann, was dazu führt, dass meine Animationen anstehen, wenn Sie mit der Maus über die Menülose fahren.

Ich brauche eine Animation, um auf halbem Weg anzuhalten, wenn sich der Schwebeflug ändert, und automatisch zur nächsten animierten Position zu laufen. Hoffe das macht Sinn, ihr werdet sehen was ich meine im Geige.

Außerdem möchte ich, dass die Animation automatisch jede Folie und 2000 ms durchläuft - und wenn die Folie selbst darüber schwebt, möchte ich, dass sie angehalten wird.

Ich weiß, dass ich so ziemlich jemanden bitten muss, mir ein benutzerdefiniertes Schiebereglerskript zu schreiben, aber es wäre so hilfreich und intuitiv zu sehen, wie ein unformatiertes Skript ohne Plugin geschrieben wird.

Mein Schieberegler muss leichtgewichtig sein, damit kein zusätzliches Markup generiert wird. Wie alle Plugins, die ich gerade ausprobiert habe, sind sie zu schwer und zu viel. Ich mag einfache Suchanfragen.

Jede Hilfe wäre sooo dankbar. Vielen Dank

Bitte sehen Sie sich mein kleines Geigenbeispiel mit der neuesten jQuery an.

http://jsfiddle.net/EYDtF/

Antworten:

1 für die Antwort № 1

Schlampig, aber vielleicht hilft es Ihnen, loszulegen

var banners = $(".banner-slides"),
controls = $(".banner-menu"),
cycle = true,
current = 0;

doCycle();

controls.find("li").hover(function() {

controls.children().removeClass("hover");
$(this).addClass("hover");

animate($(this).index());

cycle = false;
}, function() {

cycle = true;
});

function doCycle() {

if (cycle) {

if (controls.find(".hover").length > 0) {

if (controls.find(".hover").next().length > 0) {

var next = controls.find(".hover").next();

controls.children().removeClass("hover");
next.addClass("hover");

animate(current);
}
else {

controls.children().removeClass("hover");
controls.children().first().addClass("hover");

animate(0);
}
}
else {

controls.children().first().addClass("hover");

animate(0);
}
}

setTimeout(doCycle, 2000);
}

function animate(pos) {

banners.stop().animate({top: pos * -200});

current = pos + 1;
}

http://jsfiddle.net/imoda/EYDtF/5/

---

0 für die Antwort № 2

Sie müssen sich ansehen, wie diese Plugins funktionieren, die Sie nicht mögen. Im Moment zielt Ihre Hover-Funktion auf eine ID ab. Wenn Sie auf eine Klasse abzielen, reduzieren Sie sofort die Menge des Codes, z.

$(".hover").hover(function(){

$bannerSlide.animate({
"top" : var
});

});

Dann können Sie herausfinden, wie Sie die Position (var) an die Stelle übergeben können, an der Sie den Code reduziert haben.

---