| 

.NET C# Java Javascript Exception

1
Hallo zusammen, ich baue mir z.Z. einen Newsslider zusammen der ansich schon funktioniert. Nun wollte ich diesen um ein paar funktionen erweitern, nur finde ich nicht die richtige lösung bzw. denke ich das der Javascriptcode im Ansatz schon falsch bzw. nicht passend ist. //sehr bauernhafte lösung :)

Irgendwie muss man aber ja ran ... :)

Diesmal habe ich alles gleich bei JsFiddle eingebaut :)

was ich erreichen möchte ist:
- das nach einem bestimmten intervall (zb. 3000ms) die slides automatisch durchlaufen
- beim Mouseover dieser Intervall unterbrochen wird

hoffe das mir jemand nen tip geben kann wie ich das angreifen sollte.

hier der Slider: http://jsfiddle.net/9SvJp/1/


gruß GioCece
23.08.2013
GioCece 154 1 6
GioCece 154 1 6
1 Antwort
3
Da NoScripts XSS-Blocker jsFiddle grad nicht mag, anbei der überarbeitet JS-Code.

$(document).ready(function() {
// Flexslider
$('#flexslider .slide:first').show();
$('#flexslider ul.flexnavi li:first').addClass('active');

var slides = $('#flexslider .slide');
var buttons = $('#flexslider .flexnavi li');
var slideIndex = 0; // der array-index des aktuellen slide
/**
* setTo - wenn angegeben, wird der Slide mit dem übergebenen index angezeigt
*/
var autoslide = function(setTo) {
$(slides[slideIndex]).slideUp('slow');
$(buttons[slideIndex]).removeClass('active');
// slideIndex berechnen
if(setTo !== undefined) { // auf den gewünschten wert, falls angegebn
slideIndex = setTo;
} else if(slideIndex + 1 < slides.size()) { // oder inkrement, falls nicht der letzte slide aktiv ist
slideIndex++;
} else { // ersten slide anzegein
slideIndex = 0;
}
$(slides[slideIndex]).slideDown('slow');
$(buttons[slideIndex]).addClass('active');
}
// animation starten
var interval = setInterval(autoslide, 3000);

// Anhalten wenn die Maus auf einen Button oder Slide steht
$('ul.flexnavi li, #flexslider .slide').mouseenter(function() {
clearInterval(interval);
});
// Weitermachen wenn die Maus den Bereich verlässt
$('ul.flexnavi li, #flexslider .slide').mouseleave(function() {
interval = setInterval(autoslide, 3000);
});

// slide via button auswählen
$('ul.flexnavi li').click(function() {
// index des buttons suchen und als parameter für autoslide verwenden
var index = $('ul.flexnavi li').index($(this));
autoslide(index);
});
});


Damit die Slides nach Links wandern, statt nach oben:

$(document).ready(function() {
// Flexslider
$('#flexslider .slide:first').css('z-index', 50); // erstes Element nach oben
$('#flexslider ul.flexnavi li:first').addClass('active');

// alle slides die wir anezgien wollen
var slides = $('#flexslider .slide');
// und die buttons dazu
var buttons = $('#flexslider .flexnavi li');
// der array-index des aktuellen slide
var slideIndex = 0;
/**
* slide und button animation
*
* params
* * setTo - überschreibt den index des nächsten slides
*/
var autoslide = function(setTo) {
var $slide = $(slides[slideIndex]);
$slide.css('z-index', 50);
// slide nach links schieben
$slide.animate({
left: -$slide.outerWidth()
}, 800);
$(buttons[slideIndex]).removeClass('active');
// slideIndex berechnen
if(setTo !== undefined) { // auf den gewünschten wert, falls angegebn
slideIndex = setTo;
} else if(slideIndex + 1 < slides.size()) { // oder inkrement, falls nicht der letzte slide aktiv ist
slideIndex++;
} else { // ersten slide anzegein
slideIndex = 0;
}
// zurücksetzten
$slide = $(slides[slideIndex]);
$slide.css('z-index', 10);
$slide.css('left', 0);
$(buttons[slideIndex]).addClass('active');
}
// animation starten
var interval = setInterval(autoslide, 3000);

// Anhalten wenn die Maus auf einen Button oder Slide steht
$('ul.flexnavi li, #flexslider .slide').mouseenter(function() {
clearInterval(interval);
});
// Weitermachen wenn die Maus den Bereich verlässt
$('ul.flexnavi li, #flexslider .slide').mouseleave(function() {
interval = setInterval(autoslide, 3000);
});

// slide via button auswählen
$('ul.flexnavi li').click(function() {
// index des buttons suchen und als parameter für autoslide verwenden
var index = $('ul.flexnavi li').index($(this));
autoslide(index);
});
});


Dazu muss aber noch das CSS angepasst werden, hier die fraglichen Zeilen:

#flexslider .slide { position: absolute; display: block; left: 0; z-index: 0; }
24.08.2013
phg 1,6k 3
Einfach nur Kraaas .... sowas hab ich nicht erwartet. Ich hab solch ein struckturaufbau noch nicht zu gesicht bekommen und toll mit den Beschriftungen. Danke! Habs auch grad schon ausprobiert und klappt super. Aber ne frage noch dazu wenns ok wäre. Gibt es denn kein slideLeft oder slideRight? Ich hab überall geschaut doch immer wered ich auf "animate" hingewiesen. Habs auch auprobiert, doch dann seh ich nix mehr weils nimmer auftaucht. Hab beim slideUp einfach animate left -920px (slidebreite) eingestellt. Den ersten Slide bekomm ich zu sehen und der bewegt sich nach links, aber von den rest
GioCece 04.09.2013
ist nichts zu sehen. da fiel mir auf das die einzelnen slides nicht floateten. also float left eingestellt das alle nebeneinander stehen. Ich dachte das quasi alle weiteren slides nach dem ersten nachrutschen würden von der logik her, aber leider nein. Gibt es da noch ne möglichkeit das die slides einfach immer nach links rutschen?
GioCece 04.09.2013
Ich denke das liegt am CSS (display und position). Ich habe mal eine zweite Version des JS-Codes an meine Antwort angehängt und die geänderte CSS-Zeile ist auch dabei.
phg 04.09.2013
Vielen Dank. Klapt wunderbar.
GioCece 24.09.2013

Stelle deine Javascript-Frage jetzt!