Change each text after 4 second and each image after 2 second

user_15503481 0
Viewed 63

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>
jquery javascript
1 Answers

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>
user_46715000
Related