If you want to achieve a scrolling effect, you can check out this link: http://jsbin.com/welcome/42790. It might be what you're looking for. Below is the source code sample:
HTML
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<div class="scroll">
<div id="parent" class="parent">
<div class="block">1</div>
<div class="block">2</div>
<div class="block">3</div>
<div class="block">4</div>
<div class="block">5</div>
<div class="block">6</div>
<div class="block">7</div>
</div>
</div>
<button id="leftButton"><</button>
<button id="rightButton">></button>
</body>
</html>
CSS
.parent {
width: 364px;
height: 52px;
background: #EDC9FF;
margin-left: 0px;
}
.block {
width: 50px;
height: 50px;
background: #C9E2FF;
border: 1px solid #8FC3FF;
float: left;
}
.scroll {
overflow: hidden;
width: 200px;
}
JavaScript
var timeout = 0;
window.onload = function () {
var leftBtn = document.getElementById('leftButton'),
rightBtn = document.getElementById('rightButton');
leftBtn.addEventListener('mousedown', function () {
multipleScroll(-2);
}, false);
leftBtn.addEventListener('mouseup', function () {
clearTimeout(timeout);
}, false);
rightBtn.addEventListener('mousedown', function () {
multipleScroll(2);
}, false);
rightBtn.addEventListener('mouseup', function () {
clearTimeout(timeout);
}, false);
};
function scroll(offset) {
var parent = document.getElementById('parent'),
current = parseInt(parent.style.marginLeft, 10) || 0;
current += offset;
parent.style.marginLeft = current + 'px';
}
function multipleScroll(offset) {
timeout = setTimeout(function () {
multipleScroll(offset);
scroll(offset);
}, 20);
}