Shulou(Shulou.com)06/01 Report--

Most people do not understand the knowledge points of this article "how to achieve simple carousel map in HTML5", so the editor summarizes the following content, detailed content, clear steps, and has a certain reference value. I hope you can get something after reading this article. Let's take a look at this "how to achieve simple carousel map in HTML5" article.

The principle of the rotation map is something like this. Assuming that the three pictures need to be rotated, you first need to place the three pictures side by side, and then move the whole picture side by side to the left. Whenever a picture comes out of the display box completely, put the picture at the back, and cycle to move the picture to the left (or one direction). Then, there need to be two timers, one timer A controls the overall left movement speed of the three images, and the other timer B controls that every time a complete picture enters the display box, it waits for a second or two to get a better user experience.

Here I use three div boxes as a broadcast diagram to demonstrate.

Add a div to the body of html as the display box, and then add three sub-div inside the div to display as images. The code is as follows:

Add css style to the head:

At this time, the page should have a black display box div, with red, green and blue div boxes inside, and the three boxes are arranged from top to bottom.

The first step is to display all three pictures side by side.

In order to move the div, and the div is more convenient to control the position (movement) of every moment, we can only use relative positioning, and for convenience, the position movement of the three sub-div should be relative box, so box should be used as a relative reference point. Add position attributes to the box and slide code, respectively:

# box {width:100px; height:100px; border:1px solid black; position:relative;} .slide {width:100px; height:100px; position:absolute;}

Add an onload load completion event for the entire page, when the browser opens and loads and automatically executes the block of code in the event. This part of the js code can be written under the css just now, maintaining the sibling structure.

Onload=function () {var arr = document.getElementsByClassName ("slide"); for (var item0)

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.