First stage: Front-end development _ using JS to complete the first page Carousel chart effect

2018-06-04

use JS to complete the first page Carousel chart effect

First, technical analysis

　　get element: document.getElementById ("ID name")

　event (onload): page Load Event

　　timed operation:setinterval ("changeimg ()", 3000);

Second, step analysis

First step: Determine the event (onload) and bind it to a function

Step Two: Write this function of the binding

Step three: Write timed tasks (setinterval)

Fourth step: Write the function inside the timed task

Fifth step: Loop through the variables (get the position of the carousel and set the SRC attribute) [Reset when you need to notice the last picture in the loop. ]

Third, the code implementation
　JS Code:

<script>functioninit () {//timing operation of the picture display of the writing wheelSetInterval ("changeimg ()", 3000); }    //writing function     varI=0;functionchangeimg () {i++;//get picture position and set src property valuedocument.getElementById ("Img1"). src= ". /img/small0 "+i+". jpg "; if(i==3) {i=0; }    } </script>

HTML code:

<onload= "init ()">

Defines the ID at the specified location.

First stage: Front-end development _ using JS to complete the first page Carousel chart effect