[danik.js]

<style>
        body{
            text-align: center;
        }
        .scroller{
            margin-bottom: 10px;
        }
	.scroll-area{
		width: 700px;
		display: inline-block;
		vertical-align: middle;
		overflow: hidden;
		white-space: nowrap;
	}
	.scroll-control{
		height: 230px;
		line-height: 230px;
		display: inline-block;
		vertical-align: middle;
		border: 1px solid #ccc;
		padding: 0 10px;
	}
</style>
<div class="scroller" id="scroller1">
	<span class="scroll-control" data-step="-2">«</span>
	<div class="scroll-area">
		<img src="http://vazonchik.net.ua/cvetok_stroka/g01.png" alt="" />
		<img src="http://vazonchik.net.ua/cvetok_stroka/g02.png" alt="" />
		<img src="http://vazonchik.net.ua/cvetok_stroka/g03.png" alt="" />
		<img src="http://vazonchik.net.ua/cvetok_stroka/g04.png" alt="" />
		<img src="http://vazonchik.net.ua/cvetok_stroka/g05.png" alt="" />
		<img src="http://vazonchik.net.ua/cvetok_stroka/g06.png" alt="" />
		<img src="http://vazonchik.net.ua/cvetok_stroka/g07.png" alt="" />
		<img src="http://vazonchik.net.ua/cvetok_stroka/g08.png" alt="" />
		<img src="http://vazonchik.net.ua/cvetok_stroka/g09.png" alt="" />
		<img src="http://vazonchik.net.ua/cvetok_stroka/g10.png" alt="" />
		<img src="http://vazonchik.net.ua/cvetok_stroka/g11.png" alt="" />
		<img src="http://vazonchik.net.ua/cvetok_stroka/g12.png" alt="" />
		<img src="http://vazonchik.net.ua/cvetok_stroka/g13.png" alt="" />
	</div>
	<span class="scroll-control" data-step="+2">»</button>
</div>
<div class="scroller" id="scroller2">
	<span class="scroll-control" data-step="-2">«</span>
	<div class="scroll-area">
		<img src="http://vazonchik.net.ua/cvetok_stroka/g01.png" alt="" />
		<img src="http://vazonchik.net.ua/cvetok_stroka/g02.png" alt="" />
		<img src="http://vazonchik.net.ua/cvetok_stroka/g03.png" alt="" />
		<img src="http://vazonchik.net.ua/cvetok_stroka/g04.png" alt="" />
		<img src="http://vazonchik.net.ua/cvetok_stroka/g05.png" alt="" />
		<img src="http://vazonchik.net.ua/cvetok_stroka/g06.png" alt="" />
		<img src="http://vazonchik.net.ua/cvetok_stroka/g07.png" alt="" />
		<img src="http://vazonchik.net.ua/cvetok_stroka/g08.png" alt="" />
		<img src="http://vazonchik.net.ua/cvetok_stroka/g09.png" alt="" />
		<img src="http://vazonchik.net.ua/cvetok_stroka/g10.png" alt="" />
		<img src="http://vazonchik.net.ua/cvetok_stroka/g11.png" alt="" />
		<img src="http://vazonchik.net.ua/cvetok_stroka/g12.png" alt="" />
		<img src="http://vazonchik.net.ua/cvetok_stroka/g13.png" alt="" />
	</div>
	<span class="scroll-control" data-step="+2">»</button>
</div>
<script>
var Scroller = function(container) {
	this.container = container;
	this.buttons = container.querySelectorAll('.scroll-control');
	this.element = container.querySelector('.scroll-area');
	this.timerId = null;
	var scroller = this;
	for (var i = 0; i < this.buttons.length; i++) {
		this.buttons[i].onmouseover = function() {
			scroller.start(this.getAttribute('data-step')|0);
		};
		this.buttons[i].onmouseout = function() {
			scroller.stop();
		};
	}
};
Scroller.prototype = {
    start: function(step) {
        var scroller = this;
        this.stop();
        this.timerId = setInterval(function(){
            if (!scroller._scroll(step))
                this.stop();
        });
    },
    stop: function() {
        clearInterval(this.timerId);
    },
    _scroll: function(step) {
        var scrollLeft = this.element.scrollLeft;
        this.element.scrollLeft += step;
        return this.element.scrollLeft - scrollLeft;
    }
};
</script>
<script>
	new Scroller(document.getElementById('scroller1'));
	new Scroller(document.getElementById('scroller2'));
</script>