magadanskiuchen/functions.js

## functions.js
function Slider() {
	// private variables
	var container = slider.addClass('js');
	var ul = container.find('ul');
	var lis = ul.find('li');
	var btnNext = null;
	var btnPrev = null;
	var currentSlide = 0;

	// public variables
	this.duration = 300;

	// private methods
	function slideTo(index) {
		ul.stop();
		ul.animate({ left: '-' + (index * lis.outerWidth(true)) + 'px' }, this.duration);
		currentSlide = index;
	}

	// public methods
	this.currentSlide = function() {
		return currentSlide;
	}

	this.focus = function() {
		container.focus();
	}

	this.slideNext = function() {
		if (++currentSlide >= lis.length) currentSlide = 0;
		slideTo(currentSlide);
	}

	this.slidePrev = function() {
		if (--currentSlide < 0) currentSlide = lis.length - 1;
		slideTo(currentSlide);
	}

	// initialization
	slider.data('slider', this);

	container.append('<a href="#" class="prev" /><a href="#" class="next" />');

	btnNext = container.find('a.next').click(function() {
		s.slideNext();
		return false;
	});

	btnPrev = container.find('a.prev').click(function() {
		s.slidePrev();
		return false;
	});

	container.keydown(function(e) {
		if (e.which == 39) {
			s.slideNext();
		} else if (e.which == 37) {
			s.slidePrev();
		}
	});

	this.focus();
}

jQuery(function() {
	var slider = new Slider($('#slider'));
});

## markup.html
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>Slider</title>
	<link rel="stylesheet" href="style.css" media="all" />
	<script type="text/javascript" charset="utf-8" src="http://code.jquery.com/jquery-1.6.min.js"></script>
	<script type="text/javascript" charset="utf-8" src="func.js" defer="defer"></script>
</head>
<body>
	<div id="slider" tabindex="0">
		<ul>
			<li><img src="images/slide-1.jpg" alt="" /></li>
			<li><img src="images/slide-2.jpg" alt="" /></li>
			<li><img src="images/slide-3.jpg" alt="" /></li>
			<li><img src="images/slide-4.jpg" alt="" /></li>
			<li><img src="images/slide-5.jpg" alt="" /></li>
		</ul>
	</div>
</body>
</html>

## style.css
* { margin: 0; padding: 0; }
body { padding: 20px 0; background: #333; color: #FFF; font: normal 12px Arial, Helvetica, sans-serif; }

#slider { position: relative; width: 960px; margin: 0 auto; border: 2px solid #000; }
#slider:focus { outline: none; }
#slider ul { width: 100%; list-style-type: none; overflow: hidden; }
#slider ul li { display: inline; float: left; }
#slider li img { float: left; }

#slider.js { height: 540px; overflow: hidden; }
#slider.js:focus { border-color: #666; }
#slider.js ul { position: absolute; width: 50000em; height: 100%; }
#slider.js ul li { width: 960px; height: 100%; }
#slider.js a { position: absolute; top: 250px; z-index: 10; width: 20px; height: 40px; background: rgba(255, 255, 255, 0.2); }
#slider.js .next { right: 10px; }
#slider.js .prev { left: 10px; }
	function Slider() {
	// private variables
	var container = slider.addClass('js');
	var ul = container.find('ul');
	var lis = ul.find('li');
	var btnNext = null;
	var btnPrev = null;
	var currentSlide = 0;

	// public variables
	this.duration = 300;

	// private methods
	function slideTo(index) {
	ul.stop();
	ul.animate({ left: '-' + (index * lis.outerWidth(true)) + 'px' }, this.duration);
	currentSlide = index;
	}

	// public methods
	this.currentSlide = function() {
	return currentSlide;
	}

	this.focus = function() {
	container.focus();
	}

	this.slideNext = function() {
	if (++currentSlide >= lis.length) currentSlide = 0;
	slideTo(currentSlide);
	}

	this.slidePrev = function() {
	if (--currentSlide < 0) currentSlide = lis.length - 1;
	slideTo(currentSlide);
	}

	// initialization
	slider.data('slider', this);

	container.append('<a href="#" class="prev" /><a href="#" class="next" />');

	btnNext = container.find('a.next').click(function() {
	s.slideNext();
	return false;
	});

	btnPrev = container.find('a.prev').click(function() {
	s.slidePrev();
	return false;
	});

	container.keydown(function(e) {
	if (e.which == 39) {
	s.slideNext();
	} else if (e.which == 37) {
	s.slidePrev();
	}
	});

	this.focus();
	}

	jQuery(function() {
	var slider = new Slider($('#slider'));
	});
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8">
	<title>Slider</title>
	<link rel="stylesheet" href="style.css" media="all" />
	<script type="text/javascript" charset="utf-8" src="http://code.jquery.com/jquery-1.6.min.js"></script>
	<script type="text/javascript" charset="utf-8" src="func.js" defer="defer"></script>
	</head>
	<body>
	<div id="slider" tabindex="0">
	<ul>
	<li><img src="images/slide-1.jpg" alt="" /></li>
	<li><img src="images/slide-2.jpg" alt="" /></li>
	<li><img src="images/slide-3.jpg" alt="" /></li>
	<li><img src="images/slide-4.jpg" alt="" /></li>
	<li><img src="images/slide-5.jpg" alt="" /></li>
	</ul>
	</div>
	</body>
	</html>
	* { margin: 0; padding: 0; }
	body { padding: 20px 0; background: #333; color: #FFF; font: normal 12px Arial, Helvetica, sans-serif; }

	#slider { position: relative; width: 960px; margin: 0 auto; border: 2px solid #000; }
	#slider:focus { outline: none; }
	#slider ul { width: 100%; list-style-type: none; overflow: hidden; }
	#slider ul li { display: inline; float: left; }
	#slider li img { float: left; }

	#slider.js { height: 540px; overflow: hidden; }
	#slider.js:focus { border-color: #666; }
	#slider.js ul { position: absolute; width: 50000em; height: 100%; }
	#slider.js ul li { width: 960px; height: 100%; }
	#slider.js a { position: absolute; top: 250px; z-index: 10; width: 20px; height: 40px; background: rgba(255, 255, 255, 0.2); }
	#slider.js .next { right: 10px; }
	#slider.js .prev { left: 10px; }