Слайдер фотопленка

Для пролистывания картинок наведите мышку на стрелку вправо / влево или используйте колесико мышки.

Данный пример Слайдер фотопленка реализован на чистом JavaScript и не использует никаких библиотек.

Исходный код этого примера:

<style>
    .scroller_container {
        padding-left:50px;
        padding-top:50px;
    }
    .scroller_container div {
        float: left;
        vertical-align: baseline;
    }
    .scroller_window {
        width: 530px;
        overflow: hidden;
    }
    .scroller_row {
        position: relative;
        white-space: nowrap;
        width: 100%;
        padding: 22px 0 22px 0;
        background: url('images/foto.gif') repeat-x;
    }
    .scroller_row img {
        padding: 0;
        margin:0;
    }
    .scroller_row a {
        padding:0;
        margin:0;
    }
    .scroller_container > img{
        float: left;
        vertical-align: baseline;
        padding: 2px 1px 0 1px;
        cursor: pointer;
    }
    a img {
        border:0;
        height: 100px;
        width: auto;
    }
</style>

<script>
    var _scroller;
    _scroller = function () { // scroller
        return{
            speed:10, /*скорость в милисекундах*/
            position:0,
            width:0,
            step:0,
            t:null,
            window:0,
            // Инициализация скроллера
            init: function () {
                var el;
                // Получить ширину внутренней части скроллера
                el = document.getElementById('scroller_rule');
                _scroller.width = el.clientWidth;
                // Получить ширину окна скроллера
                el = document.getElementById('scroller_window');
                _scroller.window = el.clientWidth;

                // Установка обработчика колесика мыши
                addEvent(el, 'mousewheel', this.wheel);
                addEvent(el, 'DOMMouseScroll', this.wheel);

                // fix размеров для background (Opera, Chrome)
                el = document.getElementById('scroller_row');
                el.style.width = _scroller.width+'px';
            },

            // Обработчик колесика мыши
            wheel: function (e) {
                // Если уже идет прокрутка, то игнорировать событие
                if (_scroller.t != null) {
                    _scroller.stop();
                }

                e = e ? e : window.event;
                var wheelElem = e.target ? e.target : e.srcElement;
                var wheelData = e.detail ? e.detail * -1 : e.wheelDelta / 40;

                // В движке WebKit возвращается значение в 100 раз больше
                if (Math.abs(wheelData) > 100) {
                    wheelData = Math.round(wheelData / 100);
                }
                if (wheelData < 0) {
                    _scroller.step = 5 * Math.abs(wheelData);
                    _scroller.timer('right', 1);
                }
                else {
                    _scroller.step = 5 * Math.abs(wheelData);
                    _scroller.timer('left', 1);
                }
                if (window.event) {
                    e.cancelBubble = true;
                    e.returnValue = false;
                    e.cancel = true;
                }
                if (e.stopPropagation && e.preventDefault) {
                    e.stopPropagation();
                    e.preventDefault();
                }
                return false;
            },

            // Функция скроллера
            scroll: function (dir, wheel) {
                var el = document.getElementById('scroller_row');
                var step;
                if (wheel == 0) {
                    step = 2;
                }else{
                    step = Math.round(Math.log(_scroller.step * 2) * 2.5);
                    _scroller.step--;

                    if (_scroller.step == 0) {
                        _scroller.stop();
                    }
                }
                if (dir == 'left') {
                    _scroller.position += step;
                    if (_scroller.position > 0) {
                        _scroller.position = 0;
                        _scroller.stop();
                   }
                }
                else { // dir='rigth'
                    _scroller.position -= step;
                    if (_scroller.position < (_scroller.window - _scroller.width)) {
                        _scroller.position = _scroller.window - _scroller.width;
                        _scroller.stop();
                    }
                }
                el.style.left = _scroller.position + 'px';
            },

            // Таймер скроллера
            timer: function (dir, wheel) {
                _scroller.stop();
                _scroller.t = setInterval("_scroller.scroll('" + dir + "', " + wheel + ");", _scroller.speed);
            },

            // Остановка скроллера
            stop: function () {
                if (_scroller.t != null) {
                    clearInterval(_scroller.t);
                    _scroller.t = null;
                }
            }
        };
    }();
    /*if(!document.funcDomReady)document.funcDomReady=function(){_scroller.init()};
    else onDomReady(_scroller.init);*/
    window.onload=function(){setTimeout(_scroller.init,100);}; // стартуем с задержкой, чтобы все прогрузилось
</script>

<div class="scroller_container">
    <img src="images/left.gif" alt="" onmousemove="_scroller.timer('left',0);" onmouseout="_scroller.stop();">
    <div class="scroller_window" id="scroller_window">
        <div class="scroller_row" id="scroller_row">
            <div id="scroller_rule">
                <a href="#1" onclick="return!1"><img src="http://kdg.htmlweb.ru/photo/praga/b1.jpg" alt=""></a>
                <a href="#2" onclick="return!1"><img src="http://kdg.htmlweb.ru/photo/praga/b2.jpg" alt=""></a>
                <a href="#3" onclick="return!1"><img src="http://kdg.htmlweb.ru/photo/praga/b3.jpg" alt=""></a>
                <a href="#4" onclick="return!1"><img src="http://kdg.htmlweb.ru/photo/praga/b4.jpg" alt=""></a>
                <a href="#5" onclick="return!1"><img src="http://kdg.htmlweb.ru/photo/praga/b5.jpg" alt=""></a>
                <a href="#6" onclick="return!1"><img src="http://kdg.htmlweb.ru/photo/praga/b6.jpg" alt=""></a>
                <a href="#7" onclick="return!1"><img src="http://kdg.htmlweb.ru/photo/praga/b7.jpg" alt=""></a>
                <a href="#8" onclick="return!1"><img src="http://kdg.htmlweb.ru/photo/praga/b8.jpg" alt=""></a>
                <a href="#9" onclick="return!1"><img src="http://kdg.htmlweb.ru/photo/praga/b9.jpg" alt=""></a>
                <a href="#10" onclick="return!1"><img src="http://kdg.htmlweb.ru/photo/praga/b10.jpg" alt=""></a>
            </div>
        </div>
    </div>
    <img src="images/right.gif" alt="" onmousemove="_scroller.timer('right',0);" onmouseout="_scroller.stop();">
</div>
<br class="clear">

За основу взят код ManHunter, но полностью переделан на класс, добавлена кроссбраузерность, переделана структура стилей.

Вас заинтересует зацикленный показ картинок в слайдере.