Bedankt degenen die me tot nu toe hebben geholpen met dit script, jullie hebben me enorm geholpen bij het leren van enkele van de meer elegante kanten van JavaScript en jQuery.
Ik heb nog een laatste probleem met dit script, ik gebruik setinterval() om door een afbeeldingswisselaar te bladeren, de JS/Jquerycode is als volgt:
$(function() {
var rotateTimer = setInterval(rotateImg,15000);
$('#feature-links a').click(function() {
if (!$(this).hasClass('a-active')) {
clearInterval(rotateTimer);
switchToImg($(this).attr('class'));
}
});
function switchToImg(image) {
var $featureImage = $('#feature-image');
$featureImage.fadeOut(200, function() {
$featureImage.css('background-image', 'url(images/main_' + image + '.jpg)').fadeIn(200);
$('#feature-detail div').removeClass('d-active').filter('.d' + image).addClass('d-active');
});
$('#feature-links a').removeClass('a-active').filter('.' + image).addClass('a-active');
};
function rotateImg() {
var next = 'a' + (parseInt($('#feature-links a.a-active').attr('class').match(/[0-9]/))+parseInt(1));
if (!$('#feature-links a').hasClass(next))
next = 'a1';
switchToImg(next);
}
});
This script works on class names of
tags that allow a user to manually switch to an image. As well as this, rotateImg()
is providing an automated image/text cycle every 15 seconds with the help of setInterval()
.
Het probleem dat ik heb is met setInterval()
opnieuw initialiseren zodra een gebruiker handmatig op een link heeft geklikt.
In the .click
function I clear the interval timer and then make a call to the switchToImg()
function with the class name of the
tag that was clicked on passed as a variable.
Ik probeer uit te zoeken hoe ik de timer opnieuw kan instellen om te voorkomen dat een gebruiker tegen het einde van de cyclus op een link klikt en onmiddellijk naar de volgende afbeelding schakelt.
Ik heb onderzoek gedaan naar het bouwen van mijn eigen callback-functie in switchToImg()
zodat zodra de functie is voltooid, de timer opnieuw wordt ingesteld, idealiter zou ik willen dat dit aanvankelijk een langere tijd is (bijvoorbeeld 30 seconden) maar ga dan terug naar de 15 seconden klok. Mijn onderzoek heeft me echter geleid tot een hele reeks verschillende repositories waar ik moeite mee heb om hoofd of staart te maken.
Elke begeleiding over hoe ik deze functionaliteit in het script kan bouwen zou echt appreacited zijn. Bedankt voor je tijd. :)