JSFiddle - React, Tailwind, and code Playground

HTML

<div id="image"> 
                <table width="100%" border="0" cellspacing="0" cellpadding="0"><tr> 
                    <td valign="top" align="left"> 
                    </td> 
                   
                    <td valign="top" align="center"> 
                    <img id="Foto01" src="http://www.selfhtml.de/werbung/udag.gif"  width="200" height="200" border="0" alt=""> 
                    </td></tr> 
                </table>         
</div>

JavaScript

var wechselZeit = 1000; 
   imageArr = new Array() 
   imageArr[imageArr.length] = "http://www.selfhtml.de/bewertung/img/ipad.png"; 
   imageArr[imageArr.length] = "http://www.selfhtml.de/images/html-handbuch-100.jpg"; 
 
   var xAnzahl = imageArr.length; 
   var xCounter=-1; 
   var maxOpacity = 100; 
   var minOpacity = 0; 
   var disableOpacity = maxOpacity; 
   var fadeInterval = 'fadeout'; 
 
   function Bildwechsel01() 
   { 
    var objekt = document.getElementById('Foto01'); 
    xCounter++; 
    if (xCounter < xAnzahl) 
    { 
     if (fadeInterval == 'fadeout') {setOpacity(objekt, 'fadeout'); } 
     if (disableOpacity < minOpacity) 
     { 
      objekt.src = imageArr[xCounter]; 
      fadeInterval = 'fadein'; 
     } 
     if (fadeInterval == 'fadein') {setOpacity(objekt, 'fadein');} 
     if (disableOpacity > maxOpacity) 
     { 
      fadeInterval = 'fadeout'; 
      wechselZeit = 1000; 
     } else { 
      wechselZeit = 100; 
     } 
     setTimeout('Bildwechsel01()', wechselZeit); 
    } else { 
     xCounter = -1; 
     Bildwechsel01(); 
    } 
   } 
   setTimeout('Bildwechsel01()', wechselZeit); 
 
   function setOpacity(obj, direction) 
   { 
    obj.style.opacity = (disableOpacity / 100); 
    obj.MozOpacity = (disableOpacity / 100); 
    obj.style.filter = "alpha(opacity=" + disableOpacity + ")"; 
    switch (direction) 
    { 
     case 'fadein': 
      disableOpacity++; 
      break; 
     case 'fadeout': 
      disableOpacity--; 
      break; 
    } 
   }