JSFiddle - React, Tailwind, and code Playground

by pleinx

HTML

<img data-change-image src="https://image.pixelio.de/000/770/305//player/1--770305-Herbstsch%26ouml%3Bnheit-pixelio.jpg" width="20%">

JavaScript

var images = [
  'https://image.pixelio.de/000/770/305//player/1--770305-Herbstsch%26ouml%3Bnheit-pixelio.jpg',
  'https://image.pixelio.de/000/770/304//player/1--770304-Weidek%26ouml%3Brbchen%20mit%20Herbstfr%26uuml%3Bchte-pixelio.jpg',
  'https://image.pixelio.de/000/770/229//player/1--770229-Fieber%3F-pixelio.jpg'
];

var index = 0;
// ...your scroll event...
//if ( imagePosition == definedPosition ) {

// this interval is for testing code...
setInterval(function() {
  index++;
  index = (index >= images.length) ? 0 : index; 
  
  setTimeout(function() {
    $('[data-change-image]').attr('src', images[index]);
  }, 3000);
}, 3000);
// end of if statement}