Loop Slideshow

[almo136]

I have the below javascript which creates a fading slideshow. The problem is when it reaches the end of the slideshow it go backwards through the slides again ie. slide 8, slide 9, slide 10, slide 9, slide 8.

I would like it to loop instead so slide 8, slide 9, slide 10, slide 1.

Here is the code I have currently:

function addEvent ( obj, type, fn ) {
 if ( obj.attachEvent ) {
  obj["e"+type+fn] = fn;
  obj[type+fn] = function() { obj["e"+type+fn]( window.event ); }
  obj.attachEvent( "on"+type, obj[type+fn] );
 } else
  obj.addEventListener( type, fn, false );
}

function removeEvent ( obj, type, fn ) {
   if ( obj.detachEvent ) {
    obj.detachEvent( "on"+type, obj[type+fn] );
  obj[type+fn] = null;
   } else
    obj.removeEventListener( type, fn, false );
}

Function.prototype.bind = function(obj) {
  var _method = this;
  return function() {
    return _method.apply(obj, arguments);
  };  
}


Function.prototype.delay = function(del) {
  var _this = this;
  (function() { 
  setTimeout(_this,del);
  })();
}

function getstyle(elem, prop) {
if(document.defaultView)
{
return document.defaultView.getComputedStyle(elem, null).getPropertyValue(prop);
}
else if(elem.currentStyle)
{
var prop = prop.replace(/-(\w)/gi, function($0,$1)
{
//return $0.charAt($0.length - 1).toUpperCase();
return $1.toUpperCase();
});
return elem.currentStyle[prop];
}
else return null;
}
function $f(elms){
var $f = elms;
$f.fadeIn = function(delay,callbk,out) {
    var _this = this;
    for (i = 1; i <= 100; i++) {
     (function(j) {
        setTimeout(function() { 
           if (out==true) j=100-j; 
            Opacityto(_this,j);
            _this.style.zoom = 1; // for ie, set haslayout     
            if (j==100&&callbk!=undefined) {callbk.call(_this);}
            else if (out==true&&callbk!=undefined&&j==0) {callbk.call(_this);}
           },j*delay/100);
           
      })(i);   
    }
  };

  $f.fadeOut = function(delay,callbk) {
    $.fadeIn(delay,callbk,true);
  };
  
  return $f; 
} 


function Opacityto(elm,v){
  elm.style.opacity = v/100; /* CSS3 */
  elm.MozOpacity = v/100; /* FF */
  elm.style.KhtmlOpacity = v/100; /* Safari */
  elm.style.filter=" alpha(opacity ="+v+")"; /* IE */
}

function slideshow(id){
  this.ul = document.getElementById(id);
  this.lis = this.ul.getElementsByTagName("LI");
  this.len = this.lis.length;
  this.width = parseInt(getstyle(this.ul.parentNode, "width"));
  for(i=1;i<this.len;i++) {
  // this.lis[i].style.width = this.width+"px";
  this.lis[i].style.display = "block";
   Opacityto(this.lis[i],0);
  }
  this.left = this.width;
  this.t=0;
  this.k = 0;
  this.dir = "plus";
  this.delay =500;
  this.zindex = 1;
}

slideshow.prototype = {

repeat: function(fn,del){
  var _this = this;
  (function() { 
  _this.t = setInterval(fn,del);
  })();

},

attach:function(){
  _this = this;
  this.ul.onmouseover = function(){
    _stop();
  };

  this.ul.onmouseout = function(){
    
    if (_this.t!=0) return;
    _stop();
    _go();
  }

},

go: function(){
  
  _this = this;
  _stop = this.stop.bind(this);
  _go = this.go.bind(this);
  this.attach();
  clearInterval(this.t); 
  // Time each slide is displayed for
  this.repeat(this.show.bind(this),this.delay+3000);
 
},

show: function(){
  _this.k = (_this.dir == "plus") ? _this.k+1 : _this.k-1;
  if (_this.k== _this.len) {
    _this.dir = "minus";
    _this.k = _this.len -1;
  }
  else if (_this.k==0) {
    _this.dir = "plus"; 
    _this.k = _this.k+1;

  } 
  _this.zindex +=1;
  if (_this.dir == "plus") {  
    
    _this.lis[_this.k].style.zIndex = _this.zindex;
     $f(_this.lis[_this.k]).fadeIn(1000,function(){
      Opacityto(_this.lis[_this.k-1],0);   
     });  
  }
  else if (_this.dir == "minus") { 
     
    _this.lis[_this.k-1].style.zIndex = _this.zindex;
     $f(_this.lis[_this.k-1]).fadeIn(1000,function(){
      Opacityto(_this.lis[_this.k],0);     
     }); 
      
  }
      
},

//Uncomment the 2 lines below to make slideshow pause on mouseover
stop:function(){
// clearInterval(this.t);
//  this.t = 0;
}

}
window.onload=function(){
var ss1 = new slideshow("nt");
ss1.go();
}

[rocknbil]

Well, it looks to be by design to me . . . note how he/she has gone to greater effort to design directions into it with "plus" and "minus." It would take an overhaul to make it go back to 1 and always stay in the "plus" direction.

Bottom line, as you step through the array of images you'd want to reset the array pointer to 0 (first array element) when you get to the end of the array.