Copy Code code as follows:
<! DOCTYPE html>
<meta charset= "UTF-8" >
<title> Seamless scrolling--up and down </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;}
. Up{background:url (images/up.gif); top:0;}
. Down{background:url (images/down.gif); top:490px;}
. content{height:440px;overflow:hidden;position:relative;top:40px;}
. Content ul{position:absolute;top:0;left:0;}
. Content li{height:110px;}
</style>
<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= "#" title= "the ></a> </li>
<li><a href= "#" title= "222" ></a> </li>
<li><a href= "#" title= "333" ></a> </li>
<li><a href= "#" title= "444" ></a> </li>
</ul>
</div>
</div>
</body>
<script type= "Text/javascript" src= "Scroll.js" ></script>
<script type= "Text/javascript" >
Window.onload = function () {
Scroll (' top ', 1,1000);
};
</script>
Scroll.js:
Copy Code code as follows:
/**********
Function: To achieve horizontal or vertical seamless scrolling
Parameters: Direction direction, total 4 values: Left,right,top,bottom
Speed moving distance
Itime how much time to start moving, if not write the page after loading start to move
**********/
function Scroll (direction,speed,itime) {
var odiv = document.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 whether to move horizontally or vertically
oul.innerhtml + = oul.innerhtml;
switch (direction) {
Case ' left ':
Ispeed =-speed;
OUl.style.width = ali[0].offsetwidth * ali.length + ' px ';
Flag = true;
Break
Case ' right ':
Ispeed = speed;
OUl.style.width = ali[0].offsetwidth * ali.length + ' px ';
Flag = true;
Break
Case ' top ':
Ispeed =-speed;
Flag = false;
Break
Case ' Bottom ':
Ispeed = speed;
Flag = false;
Break
};
SetTimeout (Move,itime);
Left button and up button
Abtn[0].onclick = function () {
Clearinterval (timer);
Ispeed =-speed;
Move ();
};
Right and Down buttons
Abtn[1].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);
};
};
Note that the HTML structure must be the same as the structure above.
