JavaScript image seamless carousel code, javascript image seamless

JavaScript image seamless carousel code, javascript image seamless
InnerHTML: sets or retrieves HTML in the object's start and end tags.

ScrollHeight: gets the scroll height of an object.

ScrollLeft: sets or obtains the distance between the left-side border of the object and the leftmost end of the currently visible content in the window.

ScrollTop: sets or obtains the distance between the top of the object and the top of the visible content in the window.

ScrollWidth: gets the scroll width of an object.

OffsetHeight: gets the height of an object relative to the layout or the parent coordinate specified by the parent coordinate offsetParent attribute.

OffsetLeft: obtains the left position of the object relative to the layout or the parent coordinate specified by the offsetParent attribute.

OffsetTop: obtains the top position of an object relative to the layout or the parent coordinate specified by the offsetTop attribute.

OffsetWidth: gets the width of an object relative to the layout or the parent coordinate specified by the parent coordinate offsetParent attribute.

-----------------------------------------------------------------------

Seamless image scroll up

Code


<Style type = "text/css">
<! --
# Demo {
Background: # FFF;
Overflow: hidden;
Border: 1px dashed # CCC;
Height: 100px;
Text-align: center;
Float: left;
}
# Demo img {
Border: 3px solid # F2F2F2;
Display: block;
}
-->
</Style>
Scroll up
<Div id = "demo">
<Div id = "demo1">
<A href = "#"> </a>
<A href = "#"> </a>
<A href = "#"> </a>
<A href = "#"> </a>
<A href = "#"> </a>
</Div>
<Div id = "demo2"> </div>
</Div>


<Script>
<! --
Var speed = 10; // The greater the number, the slower the speed.
Var tab = document. getElementById ("demo ");
Var tab1 = document. getElementById ("demo1 ");
Var tab2 = document. getElementById ("demo2 ");
Tab2.innerHTML = tab1.innerHTML; // clone demo1 to demo2
Function Marquee (){
If (tab2.offsetTop-tab. scrollTop <= 0) // when you scroll to the junction of demo1 and demo2
Tab. scrollTop-= tab1.offsetHeight // The demo jumps to the top of the page.
Else {
Tab. scrollTop ++
}
}
Var MyMar = setInterval (Marquee, speed );
Tab. onmouseover = function () {clearInterval (MyMar)}; // clear the timer when you move the cursor up to stop scrolling.
Tab. onmouseout = function () {MyMar = setInterval (Marquee, speed)}; // reset the timer when you move the mouse away
-->
</Script>

Seamless image scrolling down

Code


<Style type = "text/css">
<! --
# Demo {
Background: # FFF;
Overflow: hidden;
Border: 1px dashed # CCC;
Height: 100px;
Text-align: center;
Float: left;
}
# Demo img {
Border: 3px solid # F2F2F2;
Display: block;
}
-->
</Style>
Scroll down
<Div id = "demo">
<Div id = "demo1">
<A href = "#"> </a>
<A href = "#"> </a>
<A href = "#"> </a>
<A href = "#"> </a>
<A href = "#"> </a>
</Div>
<Div id = "demo2"> </div>
</Div>


<Script>
<! --
Var speed = 10; // The greater the number, the slower the speed.
Var tab = document. getElementById ("demo ");
Var tab1 = document. getElementById ("demo1 ");
Var tab2 = document. getElementById ("demo2 ");
Tab2.innerHTML = tab1.innerHTML; // clone demo1 to demo2
Tab. scrollTop = tab. scrollHeight
Function Marquee (){
If (tab1.offsetTop-tab. scrollTop> = 0) // when you scroll to the junction of demo1 and demo2
Tab. scrollTop + = tab2.offsetHeight // The demo jumps to the top of the page.
Else {
Tab. scrollTop --
}
}
Var MyMar = setInterval (Marquee, speed );
Tab. onmouseover = function () {clearInterval (MyMar)}; // clear the timer when you move the cursor up to stop scrolling.
Tab. onmouseout = function () {MyMar = setInterval (Marquee, speed)}; // reset the timer when you move the mouse away
-->
</Script>

Seamless image scrolling to the left

Code


<Style type = "text/css">
<! --
# Demo {
Background: # FFF;
Overflow: hidden;
Border: 1px dashed # CCC;
Width: 500px;
}
# Demo img {
Border: 3px solid # F2F2F2;
}
# Indemo {
Float: left;
Width: 800%;
}
# Demo1 {
Float: left;
}
# Demo2 {
Float: left;
}
-->
</Style>
Scroll left
<Div id = "demo">
<Div id = "indemo">
<Div id = "demo1">
<A href = "#"> </a>
<A href = "#"> </a>
<A href = "#"> </a>
<A href = "#"> </a>
<A href = "#"> </a>
<A href = "#"> </a>
</Div>
<Div id = "demo2"> </div>
</Div>
</Div>


<Script>
<! --
Var speed = 10; // The greater the number, the slower the speed.
Var tab = document. getElementById ("demo ");
Var tab1 = document. getElementById ("demo1 ");
Var tab2 = document. getElementById ("demo2 ");
Tab2.innerHTML = tab1.innerHTML;
Function Marquee (){
If (tab2.offsetWidth-tab. scrollLeft <= 0)
Tab. scrollLeft-= tab1.offsetWidth
Else {
Tab. scrollLeft ++;
}
}
Var MyMar = setInterval (Marquee, speed );
Tab. onmouseover = function () {clearInterval (MyMar )};
Tab. onmouseout = function () {MyMar = setInterval (Marquee, speed )};
-->
</Script>

Seamless scrolling to the right

Code


<Style type = "text/css">
<! --
# Demo {
Background: # FFF;
Overflow: hidden;
Border: 1px dashed # CCC;
Width: 500px;
}
# Demo img {
Border: 3px solid # F2F2F2;
}
# Indemo {
Float: left;
Width: 800%;
}
# Demo1 {
Float: left;
}
# Demo2 {
Float: left;
}
-->
</Style>
Scroll to the right
<Div id = "demo">
<Div id = "indemo">
<Div id = "demo1">
<A href = "#"> </a>
<A href = "#"> </a>
<A href = "#"> </a>
<A href = "#"> </a>
<A href = "#"> </a>
<A href = "#"> </a>
</Div>
<Div id = "demo2"> </div>
</Div>
</Div>


<Script>
<! --
Var speed = 10; // The greater the number, the slower the speed.
Var tab = document. getElementById ("demo ");
Var tab1 = document. getElementById ("demo1 ");
Var tab2 = document. getElementById ("demo2 ");
Tab2.innerHTML = tab1.innerHTML;
Function Marquee (){
If (tab. scrollLeft <= 0)
Tab. scrollLeft + = tab2.offsetWidth
Else {
Tab. scrollLeft --;
}
}
Var MyMar = setInterval (Marquee, speed );
Tab. onmouseover = function () {clearInterval (MyMar )};
Tab. onmouseout = function () {MyMar = setInterval (Marquee, speed )};
-->
</Script>