Slider [JQuery]
Na enige tijd proberen en uitzoeken, heb ik een slider in JQuery aan de praat gekregen.
Maar als ik switch van tabblad of naar een ander full-screen openstaand programma en later weer terug ga naar de slider, haalt die de niet uitgevoerde functies weer in. In andere woorden hij slaat op hol.
Slider.
Kan iemand mij hiermee helpen, vertellen hoe ik hem kan laten doorlopen of stop kan zetten als de pagina niet actief wordt bekeken?
$(document).ready(function() {
var speed = 6000;
var slides = $('#slider ul li');
var slideAantal = slides.length;
var slideBreedte = 830;
var slideHuidig = 0;
var i = 1;
$("#slider ul").css('width', slideAantal * slideBreedte + (5 * slideAantal));
var run = setTimeout(slider, 6000);
$(".navigators").click(function(){
var nr = this.id;
$("#slider ul").animate({
'marginLeft' : -(835*(nr-1))
});
$("#navigator img").animate({
'marginLeft' : (75*(nr-1))+10
});
clearInterval(run);
});
function slider(){
$("#slider ul").animate({
'marginLeft' : -(835*i)
});
$("#navigator img").animate({
'marginLeft' : (75*i+10)
});
if(slideAantal == (i+1)){
i = 0;
}
else{
i++;
}
run = setTimeout(slider, 6000);
}
});
want anders kan je toch zoiets als dit gebruiken.
LINK: http://www.scriptiny.com/2008/12/javascript-slideshow/
DEMO: http://sandbox.scriptiny.com/javascript-slideshow/
tenminste dit lijkt al best wel op jou slider.
en je kan hem toch net zo maken als jij wil!
met die link heb je de WERKENDE basis ;)
Gewijzigd op 04/01/2013 22:34:38 door Keizer Webdesign
RobertJan Keizer op 04/01/2013 22:25:53:
moet het perse in jquery?
want anders kan je toch zoiets als dit gebruiken.
want anders kan je toch zoiets als dit gebruiken.
Zou het graag in JQuery hebben. Wil meer leren scripten en niet afhankelijk zijn van wat andere hebben gemaakt. Dus open/compressed sources zijn leuk voor gebruik maar niet om van te leren. Tenzij er een goede uitleg boven elke functionaliteit staat. Dan lijkt het op een tutorial.
Een van de tuts die ik heb gebruikt:
Slider
Deze heeft alleen niet het effect dat die flipt.
maar als je snapt waarom dat zo is kan je toch een beetje afkijken van die code.
RobertJan Keizer op 04/01/2013 23:25:24:
dat snap ik.
maar als je snapt waarom dat zo is kan je toch een beetje afkijken van die code.
maar als je snapt waarom dat zo is kan je toch een beetje afkijken van die code.
Ja dat zou ik heel graag willen. Maar zoals ik zei vele download sliders zijn compressed sources. Hieruit kun je dus niet zoveel leren.
En tutorials die er zijn, zijn zonder deze vorm van navigatie.
Het vreemde is dat toen ik een meting deed hij redelijk constant (op een paar langzame uitschieters na) bleef. Er leek werkelijk niks aan de hand: http://jsbin.com/oyafap/2/quiet
Misschien een domme vraag maar wat houden die metingen in?
Wat toon je aan?
Wat betekent wat?
Mocht het script op hol slaan moet je een enorme vermindering zien in de tijd.
Wouter J op 05/01/2013 00:32:13:
Dit is de tijd tussen elke slide. Deze is ingesteld op 6000ms in de setTimeout. Als hij 'op hol slaat' moet deze tijd korter worden. Ik heb dit script eerst 10x laten sliden (de eerste 10 resultaten), vervolgens heel lang wat anders gedaan en toen weer teruggekomen (dit zie je ergens aan het eind).
Mocht het script op hol slaan moet je een enorme vermindering zien in de tijd.
Mocht het script op hol slaan moet je een enorme vermindering zien in de tijd.
Ja hij slaat niet op hol en de functie doet die ook om de 6 seconden, maar hij haalt de beweging weer in na het inactiviteit.
Als je bijv. 18 sec wat anders gaat doen, dan gaat die 3 keer snel en daarna weer op normale snelheid.
http://www.queness.com/post/443/jquery-image-gallerynews-slider-with-caption-tutorial
Maar zie de fout niet.
Hij is niet volledig aan mijn eisen, maar volgens mij heeft dat niets te maken met de functionaliteit van de slider.
zeg maar de tekst buiten de slider
RobertJan Keizer op 05/01/2013 15:38:57:
heb je de css wel goed want die haalt overbodige text weg.
zeg maar de tekst buiten de slider
zeg maar de tekst buiten de slider
Dit is de harde versie zodat ik kon zien dat die werkte, zou dit kunnen uitmaken met wat het doet?
http://jquery.malsup.com/cycle/hover.html
icm http://jquery.malsup.com/cycle/pager2.html
Gewijzigd op 05/01/2013 15:48:43 door Tim S