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

На основе заданного времени

by alexseroshtan

HTML

<script>
    function preloadImages(screenShotsImages) {
	var i = 0;
	objImage = new Image();
	for	(i = 1; i <= screenShotsImages.length; i++) {
		objImage.src = 'http://media01.gameloft.com/products/1597/default/wap/android/screenshots/' + screenShotsImages[i];
	}
}
preloadImages(new Array('splash.jpg', '1.jpg', '2.jpg', '3.jpg', '4.jpg', '5.jpg'));
</script>
<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 scrList = document.getElementById('screnshots-list');

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

var scrWidth = image.width,
    scrHeight = image.height;

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

var speed = 200,
    scrCount = scrList.getElementsByTagName('li').length,
    press = false;

scrList.style.width = scrCount * scrWidth + 'px';
scrList.style.left = -scrWidth + 'px';

function currentImg() {
    return Math.abs(scrList.offsetLeft / scrWidth);
}

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

    if (currentImg() == 0) {
        scrList.style.left = (scrCount - 2) * -scrWidth + 'px';
    }

    var timer = null, elapsed = null,
        startTime = (new Date).getTime(),
        offsetLeft = scrList.offsetLeft;

    timer = setInterval(function() {
        elapsed = (new Date).getTime() - startTime;
        if (elapsed < speed) {
            scrList.style.left = (elapsed / speed * scrWidth) + offsetLeft + 'px';
        } else {
            clearInterval(timer);
            scrList.style.left = offsetLeft + scrWidth + 'px';
            press = false;
        }
    }, 1);
}

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

    if (currentImg() == scrCount - 1) {
        scrList.style.left = -scrWidth + 'px';
    }

    var timer = null, elapsed = null,
        startTime = (new Date).getTime(),
        offsetLeft = scrList.offsetLeft;

    timer = setInterval(function() {
        elapsed = (new Date).getTime() - startTime;
        if (elapsed < speed) {
            scrList.style.left = -(elapsed / speed * scrWidth) + offsetLeft + 'px';
        } else {
            clearInterval(timer);
            scrList.style.left = offsetLeft - scrWidth + 'px';
            press = false;
        }
   ...