Shulou(Shulou.com)06/03 Report--

This article mainly explains "JavaScript how to achieve picture scrolling", the content of the article is simple and clear, easy to learn and understand, the following please follow the editor's ideas slowly in depth, together to study and learn "JavaScript how to achieve picture scrolling" bar!

JavaScript to achieve picture scrolling method: [var timer;var speed=10;var box=document.getElementById ("box"); var boxin=document.getEl...].

This article operating environment: windows10 system, javascript 1.8.5, thinkpad T480 computer.

Let's first take a look at how to achieve the effect of picture scrolling:

The black box is the area where the scrolling image is finally displayed, and the green box is its child container, and its width is larger than the black outer box, so that the image can be scrolled by setting the scrollLeft of the black box. The innermost blue box is used to wrap all scrolling images, while the purple box will have the same content as the blue box in the future to achieve seamless image scrolling. Through the timer of JS, change the value of the scrollLeft attribute of the black box at regular intervals, make the image scroll to the left, and judge the value of scrollLeft at the same time. If the value reaches the far right side of the black box container, it means that the blue box has scrolled out of the black box to the left, and the purple box happens to be inside the black box. At this point, you need to set the value of the scrollLeft of the black box to 0 and start over.

Specific implementation code:

Html Code:

Css Code:

* {margin: 0; padding: 0;} # box {height: 100px; width: 500px; overflow: hidden;} # boxin {width: 1064px; height: 100px } # neirong {float: left;} # neirong2 {float: left;} img {width: 100px; height: 100px;}

Js Code:

Var timer; var speed=10; var box=document.getElementById ("box"); var boxin=document.getElementById ("boxin"); var neirong=document.getElementById ("neirong"); var neirong2=document.getElementById ("neirong2"); Neirong2 [XSS _ clean] = Neirong [XSS _ clean]; function move () {if (neirong2.scrollWidth-box.scrollLeft)

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.