Can someone please help and take a look at this script for me? Basically, I wanted to switch between 25 images with fade in and out effect. For some reason with this script, it starts with image #25 first instead of #1, and the fading works sometimes but not all the time, and worst of all, it would stuck with switching only between image #24 and #25 after a while.... Please help I want to use this script becasue it has the less lag, any other I tired lags out big time...

<?xml version="1.0" encoding="UTF-16"?>
<base href="Private/"/>
<!--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"/>

body {
background-color: black;
margin: 0;
padding: 0 0 0 0;
height: 480px;
width: 320px;

img {
-webkit-transition-property: opacity;
-webkit-transition-duration: 2s;
position: absolute;
width: 320px;
height: auto;

img.fade-out {
opacity: 0;

img.fade-in {
opacity: 1;
</head><body style="color: black">
<img id="one"/>
<img id="two"/>

var images = ['IMG_0001.jpg', 'IMG_0002.PNG', 'IMG_0003.jpg', 'IMG_0004.jpg', 'IMG_0005.PNG', 'IMG_0006.jpg', 'IMG_0007.jpg', 'IMG_0008.jpg', 'IMG_0009.PNG', 'IMG_0010.jpg', 'IMG_0011.jpg', 'IMG_0012.jpg', 'IMG_0013.PNG', 'IMG_0014.jpg', 'IMG_0015.jpg', 'IMG_0016.jpg', 'IMG_0017.jpg', 'IMG_0018.jpg', 'IMG_0019.jpg', 'IMG_0020.jpg', 'IMG_0021.jpg', 'IMG_0022.PNG', 'IMG_0023.jpg', 'IMG_0024.jpg', 'IMG_0025.jpg'];
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, 15000);