Encapsulation of slow functions in JS carousel Images

This article describes in detail the encapsulation of slow functions in the JS carousel diagram, which has some reference value, interested friends can refer to the fact that the carousel diagram is essentially the encapsulation of the slow function. If the carousel diagram is a running car, the slow function is its engine, today, this article introduces you to simplify and simplify your own slow functions ~~

From the perspective of requirements, we first give a simple requirement:

1. How do I implement a box on the page that moves from the starting position to the right at a constant speed to the position of 200px?

Analysis:

1) We need to know where the box is located, which can be obtained through the offsetLeft attribute;

2) to keep the box moving at a constant speed, setInterval is required for js;

3) Do you want to run the box to the right? That is, we need to constantly change the distance between the box and the start point on the left, including the margin-left and the left of the positioning. Here we choose to change the left of the absolute positioning;

4) We have to stop the distance from the start point PX and use clearInterval.

Next, let's go directly to the code.

   
   Document