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

Most people do not understand the knowledge points of this article "how to do picture scrolling in javascript", so the editor summarizes the following contents, detailed contents, clear steps, and has a certain reference value. I hope you can get something after reading this article. Let's take a look at this "how to do picture scrolling in javascript" article.

1. First of all, we set up a web page frame code as follows:

How does javascript do picture scrolling

Scroll left, scroll right.

In this way, we have completed the frame content of a web page, and we have also set up an external statement of css and JavaScript.

two。 Set the css style to complete the static page setup. The code is as follows:

Body,div,ul,li,p {padding: 0; margin: 0;} # div1 {position: relative; margin: 10px auto; border: 1px solid black; width: 680px; height: 170px; overflow: hidden;} # div1 ul {position: absolute; left: 0;} # div1 ul li {float: left; padding: 10px List-style: none; width: 150px; height: 150px;} # div1 ul li img {width: 150px; height: 150px;}

When we finish this step, we will get a static page, then the next step is to get the page moving.

3. Add the content of javascript to achieve a page effect code as follows:

_ window.onload = function () {var oDiv = document.getElementById ("div1"); var oUl = document.getElementsByTagName ("ul") [0]; var oLi = document.getElementsByTagName ("li"); var oA = document.getElementsByTagName ("a"); var timer = null; var iSpeed = 8; / / copy ul oUlf [XSS _ clean] + = oUlf [XSS _ clean] / / the width of ul is the sum of all li widths. The width of the entire ul after copying ul is the length of li multiplied by the width of a li oUl.style.width = oLi.length*oLi [0] .offsetWidth + "px" Function fnMove () {/ / the condition when the picture moves to the left, that is, the offsetLeft of the ul in the div is less than the width of a ul if (oUl.offsetLeft=0) {/ / drag the entire copied ul to the left until the first picture in the entire ul returns to the starting point oUl.style.left =-oUl.offsetWidth/2 + "px" } / / give ul a speed to increase or decrease the offsetLeft of the entire ul. If the speed is regular, move to the right; if the speed is negative, move oUl.style.left = oUl.offsetLeft + iSpeed + "px" to the left;} / / Click to scroll to the left to trigger the first an element tag oA [0] .onclick = function () {iSpeed =-8 } / / Click to scroll to the right to trigger the second an element tag oA [1] .onclick = function () {iSpeed = 8;} / / when the mouse moves into the div, the image scrolling pauses and the timer is cleared. ODiv.onmouseover = function () {clearInterval (timer);} / / when the mouse moves out of the div, the picture continues to scroll and the timer is reloaded. ODiv.onmouseout = function () {timer=setInterval (fnMove,30);}}

In the code we set the function, and on the page we can scroll in that direction by clicking, a direction of scrolling (the default is to the right). And when we hover over the scrolling picture, it will stop scrolling.

The above is about the content of this article on "how to do picture scrolling in javascript". I believe we all have a certain understanding. I hope the content shared by the editor will be helpful to you. If you want to know more about the relevant knowledge, please follow the industry information channel.

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.