I am new at jquery and I was wondering what is the best way to make something similar to slideshow which would change pictures and picture button status on itself after interval of time. Until someone will click any of images buttons then auto images changing would stop (after some time it could continue if user wouldn't press any buttons for some time).
$(document).ready(function () {
function pradinis() {
setTimeout(doSomething, 4500);
setTimeout(doSomethingElse, 1500);
setTimeout(doSomethingUsefulThisTime, 3000);
}
function kartojas() {
setTimeout(doSomething, 4500);
setTimeout(doSomethingElse, 1500);
setTimeout(doSomethingUsefulThisTime, 3000);
}
var refreshIntervalId = setInterval(kartojas, 5000);
pradinis();
$('.item1,.item2,.item3').mouseenter(function () {
clearInterval(refreshIntervalId);
});
$('.item1').click(function () {
$(".char1").fadeIn("slow");
$("char1").addClass('active');
$(".char3,.char2").fadeOut("slow");
$(".item1").addClass('active');
$(".item2,.item3").removeClass('active');
});
function doSomething() {
$('.item1').trigger('click');
};
function doSomethingElse() {
$('.item2').trigger('click');
};
function doSomethingUsefulThisTime() {
$('.item3').trigger('click');
};
$('.item2').click(function () {
$(".char1,.char3").fadeOut("slow");
$(".char2").fadeIn("slow");
$(".item2").addClass('active');
$(".item1,.item3").removeClass('active');
});
$('.item3').click(function () {
$(".char2,.char1").fadeOut("slow");
$(".char3").fadeIn("slow");
$(".item3").addClass('active');
$(".item1,.item2").removeClass('active');
});
});
Up till now I managed to create this https://jsfiddle.net/nq0s16q3/11/ but it's clear that this isn't the best way to do it. Maybe someone have an advice on this? I would really appreciate it, thx in advance.
You will want to use
setInterval
so that it continually loops your reel until it is cleared. I used a function which takes the class of the active item and gets its number from that. Specify the max number of items and it will automatically loop them. This will also make it so that if you ever add or remove an item, you don't have to change any code beyond thenumItems
variable at the top.https://jsfiddle.net/nq0s16q3/15/
Here's the javascript: