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

This article mainly introduces "how to realize automatic playback of html". In daily operation, I believe that many people have doubts about how to realize automatic playback of html. The editor has consulted all kinds of materials and sorted out simple and easy-to-use operation methods. I hope it will be helpful to answer the doubts of "how to realize automatic playback of html". Next, please follow the editor to study!

1. Background introduction

The broadcast picture, which evolved from the web page banner, is usually placed in the most prominent position on the screen and shown in a larger picture. With the development of the Internet, more and more information needs to be promoted on the web page, and the propaganda information wants to occupy the golden position, and finally compromise with each other, and the rotation map arises at the historic moment. All in all, the rotation map is a piece of information that can be switched.

two。 Knowledge analysis

Let's first look at a few examples:

As can be seen from the example, the rotation chart is generally composed of logo, bottom indicator and left and right switch buttons.

3. common problem

How to make a broadcast picture?

4. Solution

There are two ways to make a carousel graph: css or js carousel

1. Css rotation.

The flowchart explains:

1. Associate a set of buttons of input [type= "radio"] with the direction in which the same name property is set, so that the set of input can be switched.

2. Use the label tag to bind input unidirectionally, and click label to make the corresponding input: checked.

3. Multiple label tags can be bound to the same input, setting a set of label for the left and right toggle button and the bottom indicator respectively.

4. When input is: checked, you can control the style of the picture or label tag through the selector.

5 input (n) is the nth input child element of the parent element of the selected input.

6 input input-Select the sibling element after the meme.

2. Js rotation.

Here is a demo:

5. Coding actual combat

Css broadcast picture

1dyadic html layout

Three sets of label tags are set to correspond to input.

2the part of css

A, switch left and right by changing the margin-left of the image container ul, in which the image .img floats on the left and forms a line.

b. The bottom radio indicator changes with the input being: checked.

After c.input:checked, the image container ul moves to the left

After d.input:checked, the label corresponding to the left and right toggle button is promoted to the top for clicking. Since label is bound to input, the label in the sentence can be replaced with input.

Therefore, this sentence can also be understood as after input:checked, the corresponding input button is promoted to the top for clicking.

Then moved to the top of the input was: checked, loop to the previous code block, the image container ul moved to the left.

The entire demo is as follows

6. Extended thinking

1. How to achieve fade in and out switch?

Img {

Position:reletive; / / position the picture to use the z-index attribute

The overall picture is set to a smaller level.

Transition:all.5s; / / transition to fade in and out

}

Input:nth-of-type (n): checked--img:nth-of-type (n) {

The selected picture is placed on top of the picture as a whole.

}

2. How to realize automatic rotation?

Css automatic carousel can use @ keyframes animation to realize timing cycle switching, but css can not achieve simultaneous button switching and automatic carousel.

Because css can not determine the current picture automatically rotation to the location. Therefore, it can only be realized through two sets of systems. The following is the demo that is trying to merge:

3. What are the advantages and disadvantages of the two implementation methods?

Css rotation, with wider adaptability, can still be rotated after users disable js, and can be degraded smoothly. But it cannot automatically broadcast and click-to-rotate at the same time.

Js rotation, the mainstream method of rotation.

4. How to design a broadcast map to attract users?

1. Make the webcast look like part of the site.

two。 Automatic rotation disadvantages: frequent switching, switching waiting time is too long. Do not use automatic rotation on the mobile phone, let the user switch manually through good design.

3. Give clear operational feedback and content expectations.

4. With lightweight images, complex large images lead to low website performance and slow loading speed.

At this point, the study on "how to realize the automatic playback of html" is over. I hope to be able to solve your doubts. The collocation of theory and practice can better help you learn, go and try it! If you want to continue to learn more related knowledge, please continue to follow the website, the editor will continue to work hard to bring you more practical articles!

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.