<! DOCTYPE html>
<HTML lang="en - US" >
<HEAD>
<Meta charset="utf-8" >
<TITLE> Seamless rolling - up </TITLE>
<Style type="text/CSS" >
* {margin: 0; Padding: 0; }
li {list - style: none; }
img {border: 0; }
#scroll {width: 178px; Margin: 50px auto; Position: relative; }
BTN {display: block; Width: 27px; Height: 27px; Position: absolute; Left: 75px; }
the up {background: url (images/up. GIF); Top: 0; }
down {background: url (images/down. GIF); Top: 490px; }
the content {height: 440px; Overflow: hidden; Position: relative; Top: 40px; }
the content of ul {position: absolute; Top: 0; Left: 0; }
the content li {height: 110px; }
</style>
</HEAD>
<BODY>
<Div id="scroll" >
<A href="javascript:;" "Class=" BTN up ></a>
<A href="javascript:;" "Class=" BTN down ></a>
<Div class="content" >
<Ul>
<Li> <A href="http://www.script-home.com//article/#" title="111" ><Img SRC="http://www.script-home.com//article/images/1.jpg" Alt="111" width="178" height="108"/></a> </li>
<Li> <A href="http://www.script-home.com//article/#" title="222" ><Img SRC="http://www.script-home.com//article/images/2.jpg" Alt="222" width="178" height="108"/></a> </li>
<Li> <A href="http://www.script-home.com//article/#" title="333" ><Img SRC="http://www.script-home.com//article/images/3.jpg" Alt="333" width="178" height="108"/></a> </li>
<Li> <A href="http://www.script-home.com//article/#" title="444" ><Img SRC="http://www.script-home.com//article/images/4.jpg" Alt="444" width="178" height="108"/></a> </li>
</ul>
</div>
</div>
</BODY>
</HTML>
<The script type="text/javascript" SRC="http://www.script-home.com//article/scroll.js" ></script>
<The script type="text/javascript" >
window. Onload=function () {
scroll (' top ', 1100);
};
</script>

scroll. Js:
/* * * * * * * * * *
function: to achieve seamless
rolling parameters: horizontal or vertical direction direction, a total of four values: left, right, top, bottom

speed moving distance iTime began to move after how much time, if don't write the page is loaded after the start moving
* * * * * * * * * */
function scroll (direction, speed, iTime) {
var oDiv=document. The getElementById (' scroll ');
var oUl=oDiv. GetElementsByTagName (' ul ') [0];
var aLi=oDiv. GetElementsByTagName (" li ");
var aBtn=oDiv. GetElementsByTagName (' a ');
var timer=null;
var iSpeed=0;
var flag=true;//determine horizontal or vertical movement

oUl the innerHTML +=oUl. InnerHTML;

the switch (direction) {
case 'left' :
iSpeed=- speed;
oUl. Style. The width=aLi [0] offsetWidth * aLi in length + 'px';
flag=true;
break;
case 'right' :
iSpeed=speed;
oUl. Style. The width=aLi [0] offsetWidth * aLi in length + 'px';
flag=true;
break;
case 'top' :
iSpeed=- speed;
flag=false;
break;
case 'bottom' :
iSpeed=speed;
flag=false;
break;
};

setTimeout (move, iTime);

//on the left button and button aBtn [0] onclick=function () {
clearInterval (timer);
iSpeed=- speed;
move ();
};

//right button and the button
aBtn [1]. The onclick=function () {
clearInterval (timer);
iSpeed=speed;
move ();
}; .

oUl onmouseover=function () {
clearInterval (timer);
}; .

oUl onmouseout=function () {
move ();
};

function move(){
timer=setInterval(function(){
if(flag){
oUl.style.left=oUl.offsetLeft + iSpeed + 'px';
if(oUl.offsetLeft <-oUl.offsetWidth/2){
oUl.style.left='0';
}else if(oUl.offsetLeft> 0){
oUl.style.left=- oUl.offsetWidth/2 + 'px';
}
}else{
oUl.style.top=oUl.offsetTop + iSpeed + 'px';
if(oUl.offsetTop <=- oUl.offsetHeight/2){
oUl.style.top='0';
}else if(oUl.offsetTop>=0){
oUl.style.top=- oUl.offsetHeight/2 + 'px';
};
};
},30);
};
};

it is important to note: the HTML structure must be like the above structure.

you might be interested in the article:

  • DIV + CSS + javascript uninterrupted horizontal scroll implementation code
  • jquery focus image switching (digital annotation/manual/automatic play/horizontal scroll)
  • jquery based horizontal scroll bar (slider)
  • jquery based configurable circulation around rolling example
  • jquery based around rolling implementation code
  • jquery based around can control and automatic scrolling effect code
  • based on jquery implementation left click button image horizontally scrolling


This concludes the body part