Basically first two images(image1, image2) from array depend on first string(String1) from array. and other two images on String2, so i want string1 change after 4 second but in this time two images being change that relates string1 and so on for string2 and their images.
<script>
var text = ["String1", "String2"];
var backgroundImg=["image1.jpg", "image2.jpg", "image3.jpg", "image4.jpg"]
var counter = 0;
var currentPos = 0;
var elem = document.getElementById("animated-text");
var elembg = document.getElementById("animated-background");
var inst = setInterval(change, 4000);
var bginst = setInterval(changeImage, 2000);
function change() {
elem.innerHTML = text[counter];
counter++;
if (counter >= text.length) {
counter = 0;
// clearInterval(inst); // uncomment this if you want to stop refreshing after one cycle
}
}
function changeImage() {
if (++currentPos >= backgroundImg.length){
currentPos = 0;
}
elembg.style.backgroundImage = "url('"+backgroundImg[currentPos]+"')";
}
</script>
Please check these codes.
<script>
var text = ["String1", "String2"];
var backgroundImg = ["image1.jpg", "image2.jpg", "image3.jpg", "image4.jpg"]
var elem = document.getElementById( "animated-text" );
var elembg = document.getElementById( "animated-background" );
var inst = setInterval( change, 4000 );
var bginst = setInterval( changeImage, 2000 );
var text_index = 0;
var text_total = text.length - 1;
function change() {
elem.innerHTML = text[text_index];
if ( text_index == text_total ) {
text_index = 0;
} else {
text_index ++;
}
}
var bd_index = 0;
var bd_total = backgroundImg.length - 1;
function changeImage() {
elembg.style.backgroundImage = "url('" + backgroundImg[bd_index] + "')";
if ( bd_index == bd_total ) {
bd_index = 0;
} else {
bd_index ++;
}
}
</script>