Good morning,
I am trying to create an array of classes and with a 5 second interval, I would like to add and remove class replacing the current div. This is for a carousel where I currently have the background image changing at this time. I would now like to make my descriptive text alternate in the same way. Can anyone help?
I was thinking an if statement checking the current background could work. Howver I get this error: 'unexpected token {'
$(document).ready(function(){
/* HEADERCAROSUEL */
$(function() {
var headCarosuel = $(".headCarosuel");
var backgrounds = new Array(
"url('./img/backgroundVinny1.jpg')","url('./img/backgroundVinny2.jpg')"
);
var current = 0;
function nextBackground() {
$(".headCarosuel").css("background", backgrounds[current = ++current % backgrounds.length]);
setTimeout(nextBackground, 5000);
}
setTimeout(nextBackground, 5000);
$(".headCarosuel").css("background", backgrounds[0]);
if(backgrounds = $("url('./img/backgroundVinny1.jpg')").css() {
$('.headCarosuelText').removeClass('description2').addClass('description1');
}
else {
$('.headCarosuelText').removeClass('description1').addClass('description2');
}
});
});
With your info and example I've understood the following code. It changes the background image and the background class every 5 seconds.
$(document).ready(function(){
/* H E A D E R C A R O S U E L */
var headCarosuel = $(".headCarosuel");
var backgrounds = new Array(
"url('https://dummyimage.com/200x100/000/fff&text=vinny1')","url('https://dummyimage.com/200x100/000/fff&text=vinny2')"
);
var classes = [ "description1", "description2" ];
var current = 0;
function nextBackground() {
var prevIndex = current;
current = (current + 1) % backgrounds.length;
$(".headCarosuel").css("background", backgrounds[current]);
$(".headCarosuel").removeClass(classes[prevIndex]).addClass(classes[current]);
setTimeout(nextBackground, 5000);
}
nextBackground();
});
You can test it on https://codepen.io/mtomas/pen/MQXPGE
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.