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

This article will explain in detail how to achieve web rotation map in JavaScript. The content of the article is of high quality, so the editor will share it with you for reference. I hope you will have some understanding of the relevant knowledge after reading this article.

Foreword:

In the web page, we often see the effect of all kinds of rowing pictures, how on earth are they realized? Today, let's take a look! First of all, we need to prepare some pictures. I have prepared five pictures here.

Functional requirements:

The mouse passes through the rotation map module, the left and right buttons are displayed, and the left and right buttons are hidden.

Click the button on the right once and play one picture to the left, and so on, the button on the left is the same.

As the picture is played, the following small circle module changes with it.

Click on the small circle to play the corresponding picture.

Without the mouse passing through the rotation picture, the rotation map will also play the picture automatically.

Mouse over, rotation map module, automatic playback stops.

The layout of our page is as follows:

Next, the function is realized step by step.

Create a HTML page

The implementation process is as follows: first, give a big box, in order to facilitate the positioning operation of the later box, then give it a relative positioning, and add the picture to the big box in the form of an unordered list. Because the effect of the rotation picture we want to achieve is horizontal, we can add the float:left attribute to the picture, and because the ul where the picture is located is not large enough, other pictures will be squeezed below. So we can manually modify the size of the ul where the picture is located. Next, write an unordered list to place the small circle, locate it under the big box by absolute positioning, and add the small circle to make it easy for us to click on the corresponding circle and jump to the corresponding picture. Then set the left and right arrows to the appropriate positions on both sides of the large box through absolute positioning. Finally, we hide the contents outside the big box.

Document

Css file

* {margin: 0; padding: 0;} li {list-style: none;} .box {position: relative; overflow: hidden; margin: 100px auto; width: 520px; height: 280px; background-color: red;} .Jiantou {font-size: 24px; text-decoration: none; display: block; text-align: center; width: 20px; height: 30px; line-height: 30px Background: rgba (158,154,154,0.7); color: white; z-index: 999;} .left {position: absolute; top:125px; left: 0px; border-top-right-radius: 15px; border-bottom-right-radius: 15px;} .right {position: absolute; top:125px; left: 500px; border-top-left-radius: 15px; border-bottom-left-radius: 15px;} img {width: 520px Height: 280px;} .box .pic {width: 600%;} .pic li {float: left;} .lis {position: absolute; bottom: 15px; left: 50%; margin-left:-35px; width: 70px; height:13px; border-radius: 7px; background: rgba (158,154,154,0.7);} .lis li {float: left; width: 8px; height: 8px; margin: 3px; border-radius: 50%: Background-color: # fff;}. Lis .selected {background-color: cyan;}

The effect of the page is as follows:

Implement the functions of the js part

1. Left and right buttons

When the mouse passes over the carousel module, the left and right buttons are displayed, leaving the hidden left and right buttons.

First, we hide our initial two arrows through display:none; then we get the two arrows and the big box, adding mouse over and mouse away events to the big box.

As follows:

Var left = document.querySelector ('.left'); var right = document.querySelector ('.right'); var box = document.querySelector ('.box'); box.addEventListener ('mouseenter',function () {left.style.display =' block'; right.style.display = 'block';}) box.addEventListener (' mouseleave',function () {left.style.display = 'none'; right.style.display =' none'') })

The results are as follows:

2. Generate small circles dynamically

Delete the li of all the small circles first, as shown in the figure:

Because we create a small circle according to the number of pictures, so our core idea is: the number of small circles should be the same as the number of pictures, first get the number of pictures in ul (the picture is put into li, so it is the number of li), and then use loop dynamic to create node createElement ('li') and insert node ul. AppendChild (li) to generate a small circle (this small circle to be put into the ul) to note that the first small circle needs to add the selected class.

The implementation code is:

Var pic = document.querySelector ('.pic'); var lis = document.querySelector ('.lis'); for (var I = 0polii

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.