Слайдер изображений

Просто таймер

by alexseroshtan

HTML

<div id="game-screenshot">
	<ul id="screnshots-list">
        <li><img src="http://media01.gameloft.com/products/1597/default/wap/android/screenshots/5.jpg"/></li>
        <li><img src="http://media01.gameloft.com/products/1597/default/wap/android/screenshots/splash.jpg"/></li>
        <li><img src="http://media01.gameloft.com/products/1597/default/wap/android/screenshots/1.jpg"/></li>
        <li><img src="http://media01.gameloft.com/products/1597/default/wap/android/screenshots/2.jpg"/></li>
        <li><img src="http://media01.gameloft.com/products/1597/default/wap/android/screenshots/3.jpg"/></li>
            <li><img src="http://media01.gameloft.com/products/1597/default/wap/android/screenshots/4.jpg"/></li>
            <li><img src="http://media01.gameloft.com/products/1597/default/wap/android/screenshots/5.jpg"/></li>
            <li><img src="http://media01.gameloft.com/products/1597/default/wap/android/screenshots/splash.jpg"/></li>
	</ul>
	<div id="prev-screenshot"></div>
	<div id="next-screenshot"></div>
</div>

CSS

#game-screenshot {
	overflow: hidden;
	position: relative;
	margin: 20px auto;
    width: 314px;
    height: 209px;
}
#screnshots-list {
	position: relative;
}
#screnshots-list li {
	list-style: none;
	float: left;
}
#screnshots-list li img {
	display: block;
}
#prev-screenshot, #next-screenshot {
	position: absolute;
	width: 50px;
	height: 40%;
    margin: 30% 0;
}
#prev-screenshot {
	background: url('http://wapshop.gameloft.com/php5/generic_site/hdplus_full_shop_v2.5/images/icon_arrow_l.png') no-repeat center center;
	left: 0;
}
#next-screenshot {
	background: url('http://wapshop.gameloft.com/php5/generic_site/hdplus_full_shop_v2.5/images/icon_arrow_r.png') no-repeat center center;
	right: 0;
}

JavaScript

var screnshotsList = document.getElementById('screnshots-list');

var image = new Image();
image.src = screnshotsList.children[0].children[0].src;

var screenshotWidth = image.width,
    screenshotHeight = image.height;

document.getElementById('game-screenshot').style.width = screenshotWidth + 'px';
document.getElementById('game-screenshot').style.height = screenshotHeight + 'px';

var shiftLenght = 17,
    screenshotsCount = screnshotsList.getElementsByTagName('li').length,
    press = false;

screnshotsList.style.width = screenshotsCount * screenshotWidth + 'px';
screnshotsList.style.left = -screenshotWidth + 'px';

function currentImg() {
    return (screnshotsList.offsetLeft / screenshotWidth) * -1;
}

document.getElementById('prev-screenshot').onclick = function() {
    if (press) { return; }
    press = true;

    if (currentImg() == 0) {
        screnshotsList.style.left = (screenshotsCount - 2) * -screenshotWidth + 'px';
    }

    var timer = null,
        toPos = screnshotsList.offsetLeft + screenshotWidth;

    timer = setInterval(function() {
        if (screnshotsList.offsetLeft < toPos) {
            screnshotsList.style.left = screnshotsList.offsetLeft + shiftLenght + 'px';
        } else {
            clearInterval(timer);
            screnshotsList.style.left = toPos + 'px';
            press = false;
        }
    }, 1);
}

document.getElementById('next-screenshot').onclick = function() {
    if (press) { return; }
    press = true;

    if (currentImg() == screenshotsCount - 1) {
        screnshotsList.style.left = -screenshotWidth + 'px';
    }

    var timer = null,
        toPos = screnshotsList.offsetLeft - screenshotWidth;

    timer = setInterval(function() {
        if (screnshotsList.offsetLeft > toPos) {
            screnshotsList.style.left = screnshotsList.offsetLeft - shiftLenght + 'px';
        } else {
            clearInterval(timer);
            screnshotsList.style.left = toPos + 'px';
            press = false;
        }
   ...