AAA Главная
Примеры PHP Примеры JavaScript Примеры Ajax Примеры CSS,HTML

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

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


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

<style type="text/css">
    .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;
    }
</style>

<script type="text/javascript">
    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>

<h1>Слайдер фото пленка</h1>
<p>Для пролистывания картинок наведите мышьку на стрелку вправо или влево или используйте колесико мышки.
    Данный пример <b>Слайдер фото пленка</b> реализован на чистом Javascript и не использует никаких библиотек.</p>

<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" height="100" alt=""></a>
                <a href="#2" onclick="return!1"><img src="http://kdg.htmlweb.ru/photo/praga/b2.jpg" height="100" alt=""></a>
                <a href="#3" onclick="return!1"><img src="http://kdg.htmlweb.ru/photo/praga/b3.jpg" height="100" alt=""></a>
                <a href="#4" onclick="return!1"><img src="http://kdg.htmlweb.ru/photo/praga/b4.jpg" height="100" alt=""></a>
                <a href="#5" onclick="return!1"><img src="http://kdg.htmlweb.ru/photo/praga/b5.jpg" height="100" alt=""></a>
                <a href="#6" onclick="return!1"><img src="http://kdg.htmlweb.ru/photo/praga/b6.jpg" height="100" alt=""></a>
                <a href="#7" onclick="return!1"><img src="http://kdg.htmlweb.ru/photo/praga/b7.jpg" height="100" alt=""></a>
                <a href="#8" onclick="return!1"><img src="http://kdg.htmlweb.ru/photo/praga/b8.jpg" height="100" alt=""></a>
                <a href="#9" onclick="return!1"><img src="http://kdg.htmlweb.ru/photo/praga/b9.jpg" height="100" alt=""></a>
                <a href="#10" onclick="return!1"><img src="http://kdg.htmlweb.ru/photo/praga/b10.jpg" height="100" alt=""></a>
            </div>
        </div>
    </div>
    <img src="images/right.gif" alt="" onmousemove="_scroller.timer('right',0);" onmouseout="_scroller.stop();">
</div>


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

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


.

© Copyright 2008- by KDG



Rambler's Top100