var slide = new Array;
 var pictureName = new Array("a[1].jpg", "a[2].jpg", "a[3].jpg", "a[4].jpg");

 for (var i = 0; i < pictureName.length; i++) {

     slide[i] = new Image();
     slide[i].src = pictureName[i];
 }

 var m = new Array(0, 100);
 var nextImage = 0;
 var t = "";


 function next(step) {

   if (t != "") return;

   m[0] = 0;
   m[1] = 100;

   nextImage = nextImage + step;

   if (nextImage == pictureName.length) {

      nextImage = 0;
   }  

   if (nextImage == -1) {

      nextImage = pictureName.length - 1;
   }  


   document.getElementById("after").src = slide[nextImage].src;

   change_slide();

 }

 function change_slide() {

  m[0] += 1;
  m[1] -= 1;

  document.getElementById("before_div").style.opacity = m[1]/100;
  document.getElementById("after_div").style.opacity = m[0]/100;
  document.getElementById("after_div").style.filter="alpha(opacity="+m[0]+")";
  document.getElementById("before_div").style.filter="alpha(opacity="+m[1]+")";

  t = setTimeout("change_slide()",5);
  if (m[0] > 30) {

     clearTimeout(t);
     document.getElementById("before").src = slide[nextImage].src;
     document.getElementById("before_div").style.opacity = 100;
     document.getElementById("before_div").style.filter="alpha(opacity=0)";
     t = "";
  }

 }

<style>
.pic { position: absolute; top: 80px; left: 80px }
a.navigation { text-decoration: none } 
</style>

<div id="after_div" class="pic">
<img id="after" src="a[2].jpg">
</div>
<div id="before_div" class="pic">
<img id="before" src="a[1].jpg">
</div>

<a href="javascript:next(-1)" class="navigation">< Prev</a> <a href="javascript:next(1)" class="navigation">Next ></a>

[js]
... ваш код...
[/js]

document.getElementById('counter').innerHTML=((nextImage+1)+'/'+pictureName.length);