网页图片无缝循环滚动html代码(Web page seamless scroll HTML code)
网页图片无缝循环滚动html代码(Web page seamless scroll HTML code)
Picture scroll code
Seamless scrolling code
First introduce its implementation ideas: a set width and the width of the container demo hidden beyond its content, put Demo1 and demo2, Demo1 is rolling content, demo2 for the direct cloning of Demo1, by changing the Demo1 scrollTop or scrollLeft to achieve the purpose of rolling, when the junction of Demo1 and demo2 to scroll when directly back to the initial position, because the Demo1 and demo2, so don't beat the moment, so as to achieve the purpose of seamless rolling.
First, learn about several properties of objects:
InnerHTML: sets or gets the HTML in the object's start and end tags
ScrollHeight: gets the scroll height of the object.
ScrollLeft: sets or gets the distance between the left border of the object and the leftmost end of 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 parent relative to the page or the parent coordinates specified by the parent coordinate offsetParent property
OffsetLeft: gets the calculated left position of the object relative to the page or the parent coordinates specified by the offsetParent property
OffsetTop: gets the calculated top position of the object relative to the page or the parent coordinates specified by the offsetTop property
OffsetWidth: gets the width of an object relative to the page or the parent coordinate specified by the parent coordinate offsetParent property
Scroll up code:
![]() ![]() ![]() |