theshortcut/slider.css

## slider.css
#slider { width: 930px; height: 300px; overflow: hidden; position: relative; }

#wrapper { width: 9999px; position: absolute; top: 0px; left: 0px; }
#wrapper a { display: block; float: left; margin: 0; padding: 0; }
#wrapper a img { width: 930px; height: 300px; margin: 0; padding: 0; border: 0; }

#slider_next, #slider_prev { position: absolute; top: 100px; padding: 10px 25px 15px 25px; line-height: 48px; cursor: pointer; font-size: 48px; color: white; background: rgba(0, 0, 0, 0.5); -moz-border-radius: 0px 5px 5px 0px; -webkit-border-radius: 0px 5px 5px 0px; border-radius: 0px 5px 5px 0px; text-shadow: 0px 0px 5px #000; }

#slider_next { right: 0; -moz-border-radius: 5px 0px 0px 5px; -webkit-border-radius: 5px 0px 0px 5px; border-radius: 5px 0px 0px 5px; }

#slider_indicators { background: rgba(0, 0, 0, 0.3); text-align: center; font-size: 18px; color: rgba(255, 255, 255, 1); width: 930px; position: absolute; bottom: 0; text-shadow: 0px 0px 5px #000; }
#slider_indicators .indicator { margin: 0 3px; padding: 0 3px; cursor: pointer; }
#slider_indicators .indicator.selected { color: #0094cd; }

## slider.html
<html>
  <head>
    <title>Slider</title>
    <link rel="stylesheet" href="slider.css" type="text/css" media="screen" charset="utf-8"/>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript" charset="utf-8"></script>
    <script src="slider.js" type="text/javascript" charset="utf-8"></script>
  </head>
  <body>
    <div id="slider">
      <div id="wrapper">
        <a href="#1"><img src="http://www.google.com/intl/en_ALL/images/srpr/logo1w.png"/></a>
        <a href="#2"><img src="http://www.google.com/intl/en_ALL/images/srpr/logo1w.png"/></a>
        <a href="#3"><img src="http://www.google.com/intl/en_ALL/images/srpr/logo1w.png"/></a>
        <a href="#4"><img src="http://www.google.com/intl/en_ALL/images/srpr/logo1w.png"/></a>
      </div>
    </div>
  </body>
</html>

## slider.js
// variables
var slider_max, slider_count, slider_interval;

$(document).ready(function() {
  // set variables
  slider_interval = window.setInterval(function() {sliderScroll(1)}, 8000);
  slider_max = $('#slider #wrapper a img').length;
  slider_count = 0;
  // add slider controls
  $('#slider').append('<div id="slider_controls"><div id="slider_prev">&laquo;</div><div id="slider_next">&raquo;</div><div id="slider_indicators"></div></div>');
  // add slider indicators
  for( i=0; i < slider_max; i++ ) {
    $('#slider_indicators').append('<span class="indicator">&bull;</span>');
  }
  // first selector selected by default
  $('#slider_indicators .indicator:first-child').addClass('selected');
  // hide controls initially
  $('#slider_controls').hide();
  // slider hover actions
  // show/hide controls and pause/resume timer
  $('#slider').hover(
    function() {
      window.clearInterval(slider_interval);
      $('#slider_controls').stop(true).fadeTo(500,1);
    },
    function() {
      slider_interval = "";
      slider_interval = window.setInterval(function() {sliderScroll(1)}, 8000);
      $('#slider_controls').stop(true).fadeTo(500,0);
    }
  );
  // next click
  $('#slider_next').click(function() {
    sliderScroll(1);
  });
  // previous click
  $('#slider_prev').click(function() {
    sliderScroll(-1);
  });
  // indicator click
  $('#slider_indicators .indicator').click(function() {
    var delta = $('#slider_indicators .indicator').index(this) - slider_count;
    sliderScroll(delta);
  });
});

// function to scroll the slider
function sliderScroll(delta) {
  $('#slider_indicators .indicator:eq('+slider_count+')').removeClass('selected');
  slider_count += delta;
  if ( slider_count < 0 ) {
    // wrap to the end
    slider_count = slider_max - 1;
  }
  if ( slider_count >= slider_max ) {
    // wrap to start
    slider_count = 0;
  }
  $('#slider_indicators .indicator:eq('+slider_count+')').addClass('selected');
  $('#wrapper').stop(true).animate({
    left: (-930*slider_count)
  }, 500, function() {
  });
}
	#slider { width: 930px; height: 300px; overflow: hidden; position: relative; }

	#wrapper { width: 9999px; position: absolute; top: 0px; left: 0px; }
	#wrapper a { display: block; float: left; margin: 0; padding: 0; }
	#wrapper a img { width: 930px; height: 300px; margin: 0; padding: 0; border: 0; }

	#slider_next, #slider_prev { position: absolute; top: 100px; padding: 10px 25px 15px 25px; line-height: 48px; cursor: pointer; font-size: 48px; color: white; background: rgba(0, 0, 0, 0.5); -moz-border-radius: 0px 5px 5px 0px; -webkit-border-radius: 0px 5px 5px 0px; border-radius: 0px 5px 5px 0px; text-shadow: 0px 0px 5px #000; }

	#slider_next { right: 0; -moz-border-radius: 5px 0px 0px 5px; -webkit-border-radius: 5px 0px 0px 5px; border-radius: 5px 0px 0px 5px; }

	#slider_indicators { background: rgba(0, 0, 0, 0.3); text-align: center; font-size: 18px; color: rgba(255, 255, 255, 1); width: 930px; position: absolute; bottom: 0; text-shadow: 0px 0px 5px #000; }
	#slider_indicators .indicator { margin: 0 3px; padding: 0 3px; cursor: pointer; }
	#slider_indicators .indicator.selected { color: #0094cd; }
	<html>
	<head>
	<title>Slider</title>
	<link rel="stylesheet" href="slider.css" type="text/css" media="screen" charset="utf-8"/>
	<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript" charset="utf-8"></script>
	<script src="slider.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
	<div id="slider">
	<div id="wrapper">
	<a href="#1"><img src="http://www.google.com/intl/en_ALL/images/srpr/logo1w.png"/></a>
	<a href="#2"><img src="http://www.google.com/intl/en_ALL/images/srpr/logo1w.png"/></a>
	<a href="#3"><img src="http://www.google.com/intl/en_ALL/images/srpr/logo1w.png"/></a>
	<a href="#4"><img src="http://www.google.com/intl/en_ALL/images/srpr/logo1w.png"/></a>
	</div>
	</div>
	</body>
	</html>
	// variables
	var slider_max, slider_count, slider_interval;

	$(document).ready(function() {
	// set variables
	slider_interval = window.setInterval(function() {sliderScroll(1)}, 8000);
	slider_max = $('#slider #wrapper a img').length;
	slider_count = 0;
	// add slider controls
	$('#slider').append('<div id="slider_controls"><div id="slider_prev">«</div><div id="slider_next">»</div><div id="slider_indicators"></div></div>');
	// add slider indicators
	for( i=0; i < slider_max; i++ ) {
	$('#slider_indicators').append('<span class="indicator">•</span>');
	}
	// first selector selected by default
	$('#slider_indicators .indicator:first-child').addClass('selected');
	// hide controls initially
	$('#slider_controls').hide();
	// slider hover actions
	// show/hide controls and pause/resume timer
	$('#slider').hover(
	function() {
	window.clearInterval(slider_interval);
	$('#slider_controls').stop(true).fadeTo(500,1);
	},
	function() {
	slider_interval = "";
	slider_interval = window.setInterval(function() {sliderScroll(1)}, 8000);
	$('#slider_controls').stop(true).fadeTo(500,0);
	}
	);
	// next click
	$('#slider_next').click(function() {
	sliderScroll(1);
	});
	// previous click
	$('#slider_prev').click(function() {
	sliderScroll(-1);
	});
	// indicator click
	$('#slider_indicators .indicator').click(function() {
	var delta = $('#slider_indicators .indicator').index(this) - slider_count;
	sliderScroll(delta);
	});
	});

	// function to scroll the slider
	function sliderScroll(delta) {
	$('#slider_indicators .indicator:eq('+slider_count+')').removeClass('selected');
	slider_count += delta;
	if ( slider_count < 0 ) {
	// wrap to the end
	slider_count = slider_max - 1;
	}
	if ( slider_count >= slider_max ) {
	// wrap to start
	slider_count = 0;
	}
	$('#slider_indicators .indicator:eq('+slider_count+')').addClass('selected');
	$('#wrapper').stop(true).animate({
	left: (-930*slider_count)
	}, 500, function() {
	});
	}