How to use js to realize the effect of broadcast Picture

This article mainly shows you "how to use js to achieve rotation picture effect", the content is easy to understand, clear, hope to help you solve your doubts, the following let the editor lead you to study and learn "how to use js to achieve rotation picture effect" this article.

Train of thought

1. First of all, we need to get the elements we need to use.

two。 We need to make the rotated map point go where it goes, and the color changes.

3. Add left and right arrow keys to the broadcast map, you can switch up and down

4. Let the rowing map move on its own.

Operation

1. Get the elements first, and the effect of the broadcast image you need.

1. First, get the ul (photo), ol (click box) and nth (left and right keys) that you need to use.

Var ul=document.querySelector ('ul') var ol=document.querySelector (' ol') var nth=document.querySelector ('# arr') var box=document.querySelector ('# box') var left=document.querySelector ('# left') var right=document.querySelector ('# right')

two。 Encapsulate the animation effect, which will be used later.

/ / Encapsulation of location animation calls function animate (element,offset,setp,times) {/ / if true is judged to be deleted Prevent multiple triggers of if (element.jsq) {clearInterval (element.jsq)} / / get the current offset var position=ul.offsetLeft / / determine if the moving position is less than the current position Then the step size is negative if (offsetMath.abs (setp)) {element.jsq=setInterval (()) = > {position+=setp element.style.left=position+'px' / / if the difference between the current bit value and the booked position is less than one step Then stop the timer if (Math.abs (position-offset))