Is this possible to change text after 6 second and in the mean time 2 image will also be change with 3 second delay and text and images should be dependent on each other. for example:

text = [string1, string2]
images = [image1, image2, image3, image4]

so if "string1" change in 6 second so in same 6 second images "image1, image2" will also change. and so same for "string2" images "image3, image4" will change accordingly and main thing is no matter page loading took time due to heavy but text and images iteration should be matched

<script>
var text = [string1, string2];
var backgroundImg=[image1, image2, image3, image4];
var counter = 0;
var currentPos = 0;
var elem = document.getElementById("animated-text");
var elembg = document.getElementById("animated-background");
var inst = setInterval(change, 6000);
//var bginst = setInterval(changeImage, 2000);
console.log("changetextbefore");

function change() {
console.log("changetextbefore call function"   counter   currentPos);

    if (counter == 0 ) {
    console.log("counter == 0 "   counter   text[counter]);
        elem.innerHTML = text[counter];
        office1();  
    }   
    else  {
        elem.innerHTML = text[counter];
        console.log("counter == 1"   counter   text[counter]);
        office2();

    }

  counter  ;
  
  if (counter >= text.length) {
  console.log("counter >= text.length");
    counter = 0;
    // clearInterval(inst); // uncomment this if you want to stop refreshing after one cycle
  }
}


(function office1(i) {
  setTimeout(function() {
    console.log('hello'); //  your code here  
    
    if (--i) myLoop(i);   //  decrement i and call myLoop again if i > 0
  }, 3000)
})(2);      

function office1() {  
    console.log("changetextbefore call office 1");
    
    while (currentPos < 2) {
    console.log("currentPos < 2"   currentPos);
        setInterval(function(){elembg.style.backgroundImage = "url('" backgroundImg[currentPos] "')" }, 3000);
        console.log(backgroundImg[currentPos]);
        currentPos  ;
    }   
    
}  

function office2() {
    console.log("changetextbefore call office 2");
    
    while (currentPos < 4) {
    console.log("currentPos < 4"   currentPos);
        setInterval(function(){elembg.style.backgroundImage = "url('" backgroundImg[currentPos] "')" }, 3000);
        console.log(backgroundImg[currentPos]);
        currentPos  ;
    }
    
    if ( currentPos > 3) {
        console.log("changetextbefore call office 2 if condition");
        currentPos = 0;
    }
}  
</script>

Here above i write my code but unfortunately that give not same result expected. Again i need to change text in 6 second and in same 6 second, two i images will be change image1, image2 and in other 6 second second string will come up and their image3 and image 4 after 3 second delay

6second = change text to string1    (image1  => 3second , image2  => 3second  )

please check here my code in jsfiddle and should see their console

Run On Jsfiddle

CodePudding user response：

I have written a small code example. adjust interval time by your own for better understanding I have increased the interval time here

let text = ["string1", "string2"];
let backgroundImg = ["image1", "image2", "image3", "image4"];
let counter = 0;
let currentPos = 0;
let elem = document.getElementById("animated-text");
let elembg = document.getElementById("animated-background");

elem.innerText = text[0]

setInterval(() => {
  if (elem.innerText == text[1]) {
    elembg.innerHTML = `<img src="${backgroundImg[2]}.png" />`
  } else {
    elembg.innerHTML = `<img src="${backgroundImg[3]}.png" />`
  }
}, 5000);

setInterval(() => {
  if (elem.innerText == text[0]) {
    elem.innerText = text[1]
    elembg.innerHTML = `<img src="${backgroundImg[1]}.png" />`
  } else {
    elem.innerText = text[0]
    elembg.innerHTML = `<img src="${backgroundImg[0]}.png" />`
  }
}, 10000);

You can see the entire code from here: Source Code

CodePudding user response：

I have again written a small code example. adjust interval time and images by your own for better understanding I have increased the interval time here

let text = ["Headquarter - Corso Venezia 35, Milano", "Concept Store Agency - Corso XXII Marzo 29, Milano"];
let backgroundImg = ["image1.png", "image2.png", "image3.png", "image4.png"];
let elem = document.getElementById("animated-text");
let elembg = document.getElementById("animated-background");

elem.innerText = text[0]

setInterval(() => {
  if (elem.innerText == text[1]) {
    elembg.style.backgroundImage = `url(${backgroundImg[0]})`
  } else {
    elembg.style.backgroundImage = "url("   backgroundImg[1]   ")"
  }
}, 5000);

setInterval(() => {
  if (elem.innerText == text[0]) {
    elem.innerText = text[1]
    elembg.style.backgroundImage = "url("   backgroundImg[2]   ")"
  } else {
    elem.innerText = text[0]
    elembg.style.backgroundImage = "url("   backgroundImg[3]   ")"
  }
}, 10000);

You can see the entire code from here: