<?xml version="1.0" encoding="UTF-16"?> <html><head> <base href="Hernandes/"/> <!--meta name="viewport" content="width=320, minimum-scale=1.0, maximum-scale=1.0"/--> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/> <style> body { background-color: black; margin: 0; padding: 20px 0 0 0; height: 442px; width: 320px; } img { -webkit-transition-property: opacity; -webkit-transition-duration: 4s; position: absolute; width: 320px; height: auto; } img.fade-out { opacity: 0; } img.fade-in { opacity: 1; } </style> </head><body style="color: black"> <img id="one"/> <img id="two"/> <script> var images = ['Chicharo.png','Javier.png']; var index = 0; var fade_in = one; var fade_out = two; fade_in.src = images[0]; fade_out.src = images[images.length - 1]; var fade = function () { fade_in.src = images[index]; index = (index + 1) % images.length; fade_in.className = 'fade-out'; fade_out.className = 'fade-in'; var fade_tmp = fade_in; fade_in = fade_out; fade_out = fade_tmp; setTimeout(fade, 9900); }; fade(); </script> </body></html>