rtf
PC-Selbstbauer(in)
Hallo Leute,
Ich habe zurzeit ein Problem mit meinem Slider.
Die eigentliche Funktion, dass sliden beherrscht er, dass ist keine Problem. Jedoch wollte ich eine weitere Funktion einbauen, die mir das Überspringen von einigen Elementen erlaubt, so dass der User direkt auf seine gewünschte Info trifft. Leider versage ich hier gerade dauerhaft und werd schon ganz Matsche in Kopf . Ich habe 2 Funktionen für den Slider slider_out und slide_in. Zuerst wird slider_out gestartet um die erste Information auszublenden.
Danach wird im Callback die slide_in aufgerufen, die mir das nächste Element anzeigen soll. Ist das Einblenden beendet, ruf ich ebenfalls per Callback slider_out auf und übergebe ihm die zurzeit eingeblendete Seite. Das ganze Spiel fängt dann von vorne an.
Damit der User weiß wieviele Sliderelemente es gibt, ich nenn sie jetzt mal Folien, habe ich für jede "Folie" Kreise eingebaut. Dies passiert ind der set_slider_points() Funktion. Damit der User weiß, was zurzeit die aktuelle Folie ist, setze ich per Funktion slider_point einen weißen Punkt in den Kreis. Zusätzlich und jetzt kommt der Fehler, will ich, dass wenn man auf einen dieser Kreise klickt, die alte Funktion beendet wird und er direkt zu dieser angeklickten Folie springt. Danach soll er seine Zeit warten und den gewohnten gang wieder weitergeht. Eine Pause Funktion soll später auch eingebaut werden, aber das ist erstmal nicht so wichtig.
Ich sollte dazu sagen, dass dies mein erstes Größeres Projekt mit Javascript/Jquery ist und ich noch nicht sehr geübt darin bin.
und hier folgt mein kopfzereißender Code
ich hoffe mir kann einer helfen.
Ich habe zurzeit ein Problem mit meinem Slider.
Die eigentliche Funktion, dass sliden beherrscht er, dass ist keine Problem. Jedoch wollte ich eine weitere Funktion einbauen, die mir das Überspringen von einigen Elementen erlaubt, so dass der User direkt auf seine gewünschte Info trifft. Leider versage ich hier gerade dauerhaft und werd schon ganz Matsche in Kopf . Ich habe 2 Funktionen für den Slider slider_out und slide_in. Zuerst wird slider_out gestartet um die erste Information auszublenden.
Danach wird im Callback die slide_in aufgerufen, die mir das nächste Element anzeigen soll. Ist das Einblenden beendet, ruf ich ebenfalls per Callback slider_out auf und übergebe ihm die zurzeit eingeblendete Seite. Das ganze Spiel fängt dann von vorne an.
Damit der User weiß wieviele Sliderelemente es gibt, ich nenn sie jetzt mal Folien, habe ich für jede "Folie" Kreise eingebaut. Dies passiert ind der set_slider_points() Funktion. Damit der User weiß, was zurzeit die aktuelle Folie ist, setze ich per Funktion slider_point einen weißen Punkt in den Kreis. Zusätzlich und jetzt kommt der Fehler, will ich, dass wenn man auf einen dieser Kreise klickt, die alte Funktion beendet wird und er direkt zu dieser angeklickten Folie springt. Danach soll er seine Zeit warten und den gewohnten gang wieder weitergeht. Eine Pause Funktion soll später auch eingebaut werden, aber das ist erstmal nicht so wichtig.
Ich sollte dazu sagen, dass dies mein erstes Größeres Projekt mit Javascript/Jquery ist und ich noch nicht sehr geübt darin bin.
und hier folgt mein kopfzereißender Code
Code:
/*
Mein erstes kleines JQuery
*/
var timer = 3000;
$(document).ready(function() {
set_slider_points();
$( "#sliderpoint span" ).eq(0).addClass("currendot");
slider_out(timer,0);
slider_click();
});
function slider_click(){
$("#sliderpoint span").click(function(){
elementclicked = $(this).index();
});
}
//Funktion sliderout nimmt sich das aktuelle Element jeweils von headline, infotext und pic1 und lässt es nach einem verzögerten Start auslaufen.
function slider_out(delayout,elslideout){
sliderelement = elslideout;
//geht erst 10 Punkte nach links um dann in der JQuery callback Funktion eine weitere Animation aufzurufen, die das Element noch 350 Punkte nach rechts verschiebt und dabei ausbleichen lässt.
$( "#slider > .headline" ).eq(sliderelement).delay(delayout).animate({
left: "-=10",
}, 500, function() {
$( "#slider > .headline" ).eq(sliderelement).animate({
opacity: 0,
left: "+=350",
}, 1000);
});
$( "#slider > .infotext" ).eq(sliderelement).delay(delayout + 200).animate({
left: "-=10",
}, 500, function() {
$( "#slider > .infotext" ).eq(sliderelement).animate({
opacity: 0,
left: "+=350",
}, 1000);
});
$( "#slider > .pic1" ).eq(sliderelement).delay(delayout + 400).animate({
left: "-=10",
}, 500, function() {
$( "#slider > .pic1" ).eq(sliderelement).animate({
opacity: 0,
left: "+=350",
}, 1000, function() {
elslidein = elslideout + 1;
slide_in(0,elslidein);
});
});
};
//Function slidein nimmt sich das nächste Element und lässt es von der Linken seite einlaufen.
function slide_in(delayin,elslidein){
sliderelement = elslidein;
// Überprüft ob das aktuelle Element das letzte ist. Falls ja wird es wieder auf 0 zurückgesetzt.
if(sliderelement > $(".headline").length - 1){sliderelement = 0;}
//Funktionsaufruf mit der Übergabe des aktuellen Elements
slider_point(sliderelement);
$( "#slider > .headline" ).eq(sliderelement).css("left","2%").delay(delayin).animate({
opacity:"1",
left: "10%",
}, 1000);
$( "#slider > .infotext" ).eq(sliderelement).css("left","2%").delay(delayin).animate({
opacity:"1",
left: "5%",
}, 1000);
$( "#slider > .pic1" ).eq(sliderelement).css("left","2%").delay(delayin).animate({
opacity:"1",
left: "50%",
}, 1000,function(){
console.log("sliderin: " + sliderelement);
});
};
//Set die Anzahl der Punkte im Slider. Dabei zählt es die Anzahl der headline Klasse.
function set_slider_points(){
$(".headline").each(function(){
$("<span></span").appendTo("#sliderpoint");
});
}
//Setz den Punkt in der zurzeit aktiven Folie.
function slider_point(currsliderelement){
$( "#sliderpoint span" ).removeClass("currendot");
$( "#sliderpoint span" ).eq(currsliderelement).addClass("currendot");
}
Zuletzt bearbeitet: