JSFiddle - React, Tailwind, and code Playground

HTML

<ul>
     <li id="li1"><img src="http://lorempixel.com/output/animals-q-c-150-80-5.jpg"></li>
     <li id="li2"><img src="http://lorempixel.com/output/animals-q-c-150-80-3.jpg"></li>
     <li id="li3"><img src="http://lorempixel.com/output/animals-q-c-150-80-1.jpg"></li>
     <li id="li4"><img src="http://lorempixel.com/output/food-q-c-150-80-8.jpg"></li>
   </ul>

CSS

li img{
	display: none;
}

JavaScript

var count=0;
      var up = true;
	    setInterval(function() {
			$('li img').hide()
			if(count===4){up=false;}
      if(up){
			   count++
         }
         else{
         count--;
         }
              	if(count===0){up=true;}
               $('#li'+count).find('img').show()
				
            }, 500);