Image / Content slider (incl. speed reduction)

This demo shows how easy it is to set up an image/content sliding animation.
You see an unordered list (UL - LI) where all the LIs contain any content: images, movies, text, links, etc. followed by one empty DIV. The dots and their functionality get filled automatically.
See the flexibility made possible by the auto unit-converter: The whole setup and animation is done in %.
The speed reduction (to 6. 1 is default) makes the animation appear a little smoother on old or slow computers. This is due to less renderings of this 'heavy' chunc that would interupt the browsers rendering engine too often...

var slides = document.getElementById('slides'),
    dots = document.getElementById('dots'),
    slideInit = function(frame, dotFrame) { // position ILs and make dots
      var slides = frame.children,
          divs = dotFrame.children,
          sl = slides.length,
          dots = '';
      
      for(n=sl; n--;) {
        slides[n].style.cssText += ';left:'+(n*100)+'%;';
        if (n) dots += '<div></div>';
      }
      frame.current = 0;
      dotFrame.innerHTML = '<div class="dots-high"></div>' + dots;
      for (n=divs.length;n--;) divs[n].current = n+1;
    },
    slide = function(myMorph, frame, dotFrame, duration) { // set up sliding animation
      var slides = frame.children,
          dots = dotFrame.children;
      
      frame.current = frame.current >= slides.length-1 ? 0 : frame.current + 1;
      for (n=dots.length; n--;) dots[n].className = frame.current == n ? 'dots-high' : ''; 
      myMorph.reset(slides,
        {'margin-left': '-'+(frame.current * 100)+'%'},
        {duration: duration, speed: 6},
        function(n) { // quinticEaseInOut
          if ((n*=2)<1) return 0.5*n*n*n*n*n; return 0.5*((n-=2)*n*n*n*n+2);
        }
      ).start();
    },
    slideTime,
    initInterval = function() {
      slideTime = window.setInterval(function(){slide(myMorph, slides, dots, 900)}, 6000);
    },
    myMorph = new jsMorph();

dots.onmouseout = dots.onclick = function(e) { // event delegation
  var e = e || window.event, obj = e.target || e.srcElement;
  
  if (e.type == 'click') {
    if (!obj.current) return;
    window.clearInterval(slideTime);
    slideTime = null;
    slides.current = obj.current-2;
    slide(myMorph, slides, dots, 900);
    return false;
  } else if (!slideTime) initInterval();
};

slideInit(slides, dots);
initInterval();