Commonly used JS image scrolling (seamless, smooth, up and down left and right scroll)
Code complete innerHTML: Set or retrieve HTML within the object start and end tags
Parameters:
Commonly used JS image scroll (seamless, smooth, up and down scroll left and right) code innerHTML: Set or get HTML in object start and end tags scrollHeight: Gets the scroll height of the object. scrollLeft: Sets or gets the distance between the left-most end of the object's left boundary and the currently visible content in the window scrollTop: Sets or gets the distance between the top of the object and the top of the visible content in the window scrollWidth: Gets the scroll width of the object offsetHeight: Gets the height of the object relative to the layout or the parent coordinate specified by the parent coordinate offsetParent attribute offsetLeft: Gets the calculated left-hand position of the object relative to the layout or parent coordinates specified by the offsetParent attribute OffsetTop: Gets the calculated top position of the object relative to the layout or parent coordinates specified by the offsetTop attribute offsetWidth: Gets the width of the object relative to the layout or the parent coordinate specified by the parent coordinate offsetParent attribute The following includes four directions of scrolling code, the bold part needs to be modified by itself, can be modified to more complex code, such as text mixing, adding borders, limiting the size of the picture, and so on. When width is increased, some pictures should be added accordingly (the total width of all pictures should be greater than the set width). Even if they are repeated, they will stop after scrolling for a while, otherwise the pictures should not be too big, otherwise they will scroll slowly under IE! -----------------------------------------------------------------------
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>The effect of continuously scrolling up, down, left and right pictures seamlessly(Compatible with Firefox and IE)</title>
</head>
<body>
<div id="colee" style="overflow:hidden;height:253px;width:410px;">
<div id="colee1">
<p><img src="images/112233.jsp"></p>
<p><img src="images/112233.jsp"></p>
<p><img src="images/112233.jsp"></p>
<p><img src="images/112233.jsp"></p>
<p><img src="images/112233.jsp"></p>
<p><img src="images/112233.jsp"></p>
</div>
<div id="colee2"></div>
</div>
<script>
var speed=30;
var colee2=document.getElementById("colee2");
var colee1=document.getElementById("colee1");
var colee=document.getElementById("colee");
colee2.innerHTML=colee1.innerHTML; //Cloning colee1 as colee2
function Marquee1(){
//When scrolling to the junction of colee1 and colee2
if(colee2.offsetTop-colee.scrollTop<=0){
colee.scrollTop-=colee1.offsetHeight; //colee jumps to the top
}else{
colee.scrollTop++
}
}
var MyMar1=setInterval(Marquee1,speed)//set timer
//Clear the timer when the mouse moves up to achieve the purpose of rolling stop
colee.onmouseover=function() {clearInterval(MyMar1)}
//Reset the timer when the mouse moves away
colee.onmouseout=function(){MyMar1=setInterval(Marquee1,speed)}
</script>
<!--Scroll up to end the code-->
<br>
<!--Here's scrolling down the code-->
<div id="colee_bottom" style="overflow:hidden;height:253px;width:410px;">
<div id="colee_bottom1">
<p><img src="images/112233.jsp"></p>
<p><img src="images/112233.jsp"></p>
<p><img src="images/112233.jsp"></p>
<p><img src="images/112233.jsp"></p>
<p><img src="images/112233.jsp"></p>
<p><img src="images/112233.jsp"></p>
</div>
<div id="colee_bottom2"></div>
</div>
<script>
var speed=30
var colee_bottom2=document.getElementById("colee_bottom2");
var colee_bottom1=document.getElementById("colee_bottom1");
var colee_bottom=document.getElementById("colee_bottom");
colee_bottom2.innerHTML=colee_bottom1.innerHTML
colee_bottom.scrollTop=colee_bottom.scrollHeight
function Marquee2(){
if(colee_bottom1.offsetTop-colee_bottom.scrollTop>=0)
colee_bottom.scrollTop+=colee_bottom2.offsetHeight
else{
colee_bottom.scrollTop--
}
}
var MyMar2=setInterval(Marquee2,speed)
colee_bottom.onmouseover=function() {clearInterval(MyMar2)}
colee_bottom.onmouseout=function() {MyMar2=setInterval(Marquee2,speed)}
</script>
<!--Scroll down to end the code-->
<br>
<!--Here's scrolling to the left-->
<div id="colee_left" style="overflow:hidden;width:500px;">
<table cellpadding="0" cellspacing="0" border="0">
<tr><td id="colee_left1" valign="top" align="center">
<table cellpadding="2" cellspacing="0" border="0">
<tr align="center">
<td><p><img src="images/112233.jsp"></p></td>
<td><p><img src="images/112233.jsp"></p></td>
<td><p><img src="images/112233.jsp"></p></td>
<td><p><img src="images/112233.jsp"></p></td>
<td><p><img src="images/112233.jsp"></p></td>
<td><p><img src="images/112233.jsp"></p></td>
</tr>
</table>
</td>
<td id="colee_left2" valign="top"></td>
</tr>
</table>
</div>
<script>
//When using div, make sure that colee_left2 and colee_left1 are on the same line.
var speed=30//The greater the velocity value, the slower the speed.
var colee_left2=document.getElementById("colee_left2");
var colee_left1=document.getElementById("colee_left1");
var colee_left=document.getElementById("colee_left");
colee_left2.innerHTML=colee_left1.innerHTML
function Marquee3(){
if(colee_left2.offsetWidth-colee_left.scrollLeft<=0)//offsetWidth is the visible width of the object
colee_left.scrollLeft-=colee_left1.offsetWidth//scrollWidth is the width of the actual content of the object, not the width of the boundaries.
else{
colee_left.scrollLeft++
}
}
var MyMar3=setInterval(Marquee3,speed)
colee_left.onmouseover=function() {clearInterval(MyMar3)}
colee_left.onmouseout=function() {MyMar3=setInterval(Marquee3,speed)}
</script>
<!--Scroll to the left to end the code-->
<br>
<!--Here's scrolling code to the right-->
<div id="colee_right" style="overflow:hidden;width:500px;">
<table cellpadding="0" cellspacing="0" border="0">
<tr><td id="colee_right1" valign="top" align="center">
<table cellpadding="2" cellspacing="0" border="0">
<tr align="center">
<td><p><img src="images/112233.jsp"></p></td>
<td><p><img src="images/112233.jsp"></p></td>
<td><p><img src="images/112233.jsp"></p></td>
<td><p><img src="images/112233.jsp"></p></td>
<td><p><img src="images/112233.jsp"></p></td>
</tr>
</table>
</td>
<td id="colee_right2" valign="top"></td>
</tr>
</table>
</div>
<script>
var speed=30//The greater the velocity value, the slower the speed.
var colee_right2=document.getElementById("colee_right2");
var colee_right1=document.getElementById("colee_right1");
var colee_right=document.getElementById("colee_right");
colee_right2.innerHTML=colee_right1.innerHTML
function Marquee4(){
if(colee_right.scrollLeft<=0)
colee_right.scrollLeft+=colee_right2.offsetWidth
else{
colee_right.scrollLeft--
}
}
var MyMar4=setInterval(Marquee4,speed)
colee_right.onmouseover=function() {clearInterval(MyMar4)}
colee_right.onmouseout=function() {MyMar4=setInterval(Marquee4,speed)}
</script>
<!--Scroll to the right to end the code-->
</body>
</html>