jquery.slideshow.js

// global to store a reference
// to the timed autoplay slideshow
var autoplay = null

// Slideshow object
var Slideshow = {
  inited: false,
  
  // default settings when 
  // calling Slideshow.play()
  settings: {
    transition_speed: 300,
    delay: 5000,
    list: '#slideshow ul',
    handlers: '#handlers span.handler',
    active_css: 'active',
    play_button: '#slideshow_play'
  },
  
  // initialization 
  init: function(options) {
    // update settings with user-defined
    // preferences
    $.extend(this.settings, options || {})
    
    var $ul = $(this.settings.list),
        $content_width = $ul.width(),
        total_width = $content_width * $ul.children('li').length
    
    // set the width of the list to be as wide
    // as a combination of all child <li>'s
    $ul.width(total_width.toString() + 'px')
    
    // allow the user to interact with the
    // slideshow by clicking on a particular slide
    var clickHandler = function() {
      // wipe out the reference to the autoplay
      clearTimeout(autoplay)

      $(Slideshow.settings.handlers).removeClass(Slideshow.settings.active_css)
      $(this).parent().addClass(Slideshow.settings.active_css)
      
      // adjust the margin based on the desired slide
      var margin = $content_width * ($(this).html() - 1)
      $ul.stop().animate({ marginLeft: -margin }, Slideshow.settings.transition_speed)
      
      // show the play button to allow
      // slideshow autoplay to continue
      $(Slideshow.settings.play_button).show()
      
      return false
    }
    
    // bind click handlers
    $(this.settings.handlers).find('a').click(clickHandler)
    $(this.settings.play_button).find('a').click(function() {
      Slideshow.playButton($(this).parent())
      return false
    })
    
    // we now have lift off
    this.inited = true
  },
  
  // handles the play button click
  playButton: function(button) {
    // immediately start autoplay
    this.rotate()

    // hide the play button
    $(button).hide()

    // ensure that this.play() knows
    // we've already inited
    this.inited = true

    // play the slideshow
    this.play()
  },
  
  // responsible for rotating
  // to the next slide
  rotate: function() {
    var next = $('#handlers span.' + Slideshow.settings.active_css).next(Slideshow.settings.handlers).find('a'),
        first = $(Slideshow.settings.handlers + ':first').find('a')
    
    // go to the next slide, unless
    // we're on the last slide, then
    // go to the first slide
    if (next.length != 0) {
      next.trigger('click')
    } else {
      first.trigger('click')
    }
  },
  
  play: function(options) {
    if (!this.inited) this.init(options)
    
    // shifts the slides in the order they're listed
    var shift = function() {
      // next slide, please
      Slideshow.rotate()
      
      // no play button while slides are autoplaying
      $(Slideshow.settings.play_button).hide()
      
      // recursive call to ensure autoplay continues
      autoplay = setTimeout(shift, Slideshow.settings.delay)
    }
    
    autoplay = setTimeout(shift, this.settings.delay)
  }
}