the roller of this page is a simple JavaScript code.
html code:
- divs to roll should be given class name "scrolldiv" and id's like "scrolldiv1", "scrolldiv2", "scrolldiv3" etc. where only "scrolldiv1" is visible( style="display:block" ) all the others are hidden ( style="display:none" ). For example:

< div id="scrolldiv1" class="scrolldiv" style="display:block" > content to roll , first page </div>
< div id="scrolldiv2" class="scrolldiv" style="display:none" > content to roll , second page </div>
< div id="scrolldiv3" class="scrolldiv" style="display:none" > content to roll , second page </div>

- include the "roller button" links:

< div class="scrollit" onClick="goBackward();" style="left:20px;" > << </div>
< div class="scrollit" onClick="goForward();" style="left:360px;" > >> </div>

in the page css style sheet define the scrolldiv class and you can style the "button" links :

.scrolldiv{ position: relative;}
.scrollit{ position: absolute; text-align:left; top: -20px; width: 300px; cursor: pointer; color:#db7a17; font-weight:bolder; }

the skeleton of the JavaScript code:

function goForward(){ /* get the obj of the next div to roll in and scroll out the actual div */ }
function goBackward(){ /* get the obj of the previous div to roll in and scroll out the actual div */ }
function scrollOut( ... ){
/*
1. set new values for "left" and "opacity", ie. "slide" and "fade" the actual div
2. if i > 0 then start a timeOut and call scrollOut again
3. if i is counted down to 0 then set actual div display:none and new div display: block then call slideIn(...) to roll in the next (or prevoius) div
*/
}
function scrollIn( ... ){
/*
1. set new values for "left" and "opacity", ie. "slide" and "fade" the actual div
2. if i > 0 then start a timeOut and call scrollIn again
3. if i is counted down to 0 then we are done.
*/
}

you can download the javascript source here.

ஐ

comment it: