Shulou(Shulou.com)05/31 Report--

In this article Xiaobian introduces in detail "JavaScript based on timer how to achieve picture seamless scrolling function", the content is detailed, the steps are clear, and the details are handled properly. I hope this "JavaScript based on timer how to achieve picture seamless scrolling function" article can help you solve your doubts, following the editor's ideas slowly in-depth, together to learn new knowledge bar.

I. the theoretical basis of seamless rolling

Basic knowledge

1.setInterval (function,time), clearInterval (timer)

The setInterval () method can call a function or evaluate an expression for a specified period (in milliseconds).

The setInterval () method keeps calling the function until clearInterval () is called or the window is closed. The ID value returned by setInterval () can be used as a parameter to the clearInterval () method.

The clearInterval () method cancels the timeout set by setInterval ().

The argument to the clearInterval () method must be the ID value returned by setInterval ().

The difference between 2.offsetLeft and style.left

OffsetLeft gets the left margin relative to the parent object

Left gets or sets the left margin relative to the parent object with the positioning attribute (position defined as relative)

If the position of the parent div is defined as relative and the position of the child div is defined as absolute, then the value of the style.left of the child div is relative to the value of the parent div

This is the same as offsetLeft, except that:

1. Style.left returns a string, for example, 28px focus offsetLeft returns a value of 28. If you need to calculate the value obtained, it is more convenient to use offsetLeft.

2. Style.left is read-write, and offsetLeft is read-only, so to change the location of div, you can only modify style.left.

3. The value of style.left needs to be defined in advance, otherwise the value obtained will be empty. And it has to be defined in html, and I've done experiments, and if it's defined in css, the value of style.left is still empty, and that's the problem I encountered at the beginning, and I can't always get the value of style.left.

The offsetLeft can still be fetched without the need to define the location of the div in advance.

Code snippet

Seamless scrolling * {margin:0; padding: 0;} # div2 {width: 400px; margin: 100px auto;} input {margin:0 auto; text-align: center; margin-left: 80px; font-size: 40px;} # div1 {width: 712px; height: 108px; margin: 100px auto; position: relative Background-color: red; overflow: hidden;} # div1 ul {position: absolute; left: 0; top: 0;} # div1 ul li {float: left; width: 178px; height: 108px; list-style:none;} _ window.onload=function () {var oDiv=document.getElementById ('div1'); var oUl=document.getElementsByTagName (' ul') [0] Var aLi=oUl.getElementsByTagName ('li'); var lBtn=document.getElementById (' lbtn'); var rBtn=document.getElementById ('rbtn'); / / copy one copy of ul to ul (so ul equals 8 pictures) oUl[ XSS _ clean] = oUl[ XSS _ clean] + oUl[ XSS _ clean]; oUl.style.width=aLi [0]. OffsetWidth*aLi.length+'px' / / speed controls the direction and speed of picture movement var speed=2; function move () {if (oUl.offsetLeft0) {oUl.style.left=-oUl.offsetWidth/2+'px';} oUl.style.left=oUl.offsetLeft+speed+'px';} var timer=setInterval (move,30) / / when the mouse moves in, the picture stops moving oDiv.onmouseover=function () {clearInterval (timer);}; / / when the mouse moves out, the picture continues to move oDiv.onmouseout=function () {timer=setInterval (move,30);} / / the button controls the movement direction lBtn.onclick= function () {speed=-2;} rBtn.onclick=function () {speed=2 }}

Third, effect picture

After reading this, the article "JavaScript how to achieve seamless picture scrolling based on timer" has been introduced. If you want to master the knowledge of this article, you still need to practice and use it before you can understand it. If you want to know more about related articles, you are welcome to 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.