JS seamless rolling effect implementation method analysis, js seamless rolling implementation

JS seamless rolling effect implementation method analysis, js seamless rolling implementation

This article describes how to implement the seamless rolling effect of JavaScript. We will share this with you for your reference. The details are as follows:

Effect:

1. Scroll slowly to the left by default

2. Move the arrow to the left or scroll to the left. Move the arrow to the right and scroll to the right.

3. Move it to the image and stop scrolling.

Ideas:

1. Calculate the ul width of the image list

2. Enable the timer to increase the left margin, resulting in the effect of moving to the left.

3. Copy an image list and move it to the left. When the left margin is greater than the width of a copy, the left margin is pulled back to 0. When moving to the right, when the left margin is greater than 0, the left margin is pulled to the width half of the total two image lists (that is, the width of one copy ). (The pull is very fast, and the user cannot notice it, resulting in a seamless rolling illusion)

4. The positive and negative values of offsetLeft determine which side to move

5. Put the timer on the image and stop it.

Window. onload = function () {var odiv = document. getElementById ('div '); var oul = odiv. getElementsByTagName ('ul ') [0]; var oli = oul. getElementsByTagName ('oul '); var btn = document. getElementsByTagName ('btn '); var ispeed =-1; var timer = null; oul. innerHTML + = oul. innerHTML; // copy the image list to oul. style. width = oli [0]. offsetWidth * oli. length + 'px '; // If the width of ul is not calculated, the image will appear after the movement and then be loaded. There is a kind of unsmooth feeling, and too many images will be split, determined by the outer div width timer = setInterval (f Unction () {oul. style. left = oul. offsetLeft + ispeed + 'px '; // offsetLeft outputs numbers without unit, and oul is also used on the right. style. left outputs a string, not a value, and it returns a line style, useless if (oul. offsetLeft <-oul. offsetWidth/2) {// can also be used for judgment. style. left or. style. width? (Not Sure) oul. style. left = 0;} else if (oul. offsetLeft> 0) {oul. style. left =-oul. offsetWidth/2;}), 30}; btn [0]. onmouseover = function () {ispeed =-1 ;}; btn [1]. onmouseover = function () {ispeed = 1 ;}; oul. onmouseover = function () {clearInterval (timer) ;}; oul. onmouseout = function () {timer = setInterval (function () {oul. style. left = oul. offsetLeft + ispeed + 'px '; if (oul. offsetLeft <-oul. offsetWidth/2) {oul. style. left = 0;} els E if (oul. offsetLeft> 0) {oul. style. left =-oul. offsetWidth/2;}), 30}; // can I achieve the same effect if the speed increases and the timer time increases? The answer is no. Will become one card and one card };};

Note:The width obtained in this way does not contain margin, so the margin between the image can be written as the width of li greater than the width of img, and the width of li-img, that is, the margin and