Native JS achieves carousel effects + pre-school experience (to prevent flooding attacks), and js gets mad

Native JS achieves carousel effects + pre-school experience (to prevent flooding attacks), and js gets mad

Plug-in! Plug-in! I heard someone ask for this plug-in every day. Of course, using a third-party plug-in can greatly improve development efficiency. But as a newbie, I still like to implement it myself, mainly because I have time!

Today, I will share with you how to use native JS to implement image carousel.

The elders can ignore the following nonsense:

Before getting started, let's talk about how I feel at the front end. It may take about two months to complete today. The course time is usually 6-10 hours a day, and it is purely self-taught. It is said that the training is unreliable! My current stage is only three major components (HTML5, CSS3, and javascript), and all other knowledge is behind the learning plan .... I am in a confused period. I don't know what to learn first! No matter what, first slide the three major items. If the elders have any good suggestions, I hope to give them some advice!

From HTML5 to CSS3, I felt that the front-end was quite simple, and I was a little confident and motivated. I went on to learn JS and learned C # and Apple's swift before, they are all object-oriented strong-type languages that are relatively advanced, but I still like the front-end, so I came here and started to learn JS. It was quite easy, that is, I felt that this language was a bit messy, not the same as others! However, the authoritative guide is difficult to understand some things. If there is no way, you can simply look at Baidu and learn more about the concepts such as closures and prototypes, and you will be able to grasp 7788 of them, at this stage, you may have learned that the front-end contains many things! There are a bunch of third-party class libraries, frameworks, and many other things. In short, new terms are constantly emerging in front of you. Some say this is outdated, and that is about to be the mainstream, so messy! So messy! Next, how should I go? What should I learn first? What do you learn later?

I am currently at this stage. Sometimes I can't see anything for two consecutive days, and I can't sleep. I'm upset, that is, I'm confused!

I just thought, what's wrong with me? I don't understand! Forget it. Take a rest first and exercise! Just go for a run and visit! Think about it: How to bring yourself into the status again!

Later I did this: give myself some sugar! (Do some simple instances first)

I found the sugar really sweet, and I could do it! A sense of accomplishment is simple, and the motivation is full! I write an instance and another instance. If I am not familiar with the API, I will go through the document (I will write it before reading other people's code, but I will not read it again, I felt like I was actually back and started to get on the right track!

I also made a special look at what kind of people are needed by most front-end companies, and then I made a learning plan for myself. Of course, because I have time, so I want to take a while to consolidate the three foundations, practice more, and then repeat the document to learn more about their basic and Internal principles! No matter what you learn next, you will get started more easily! At the same time, continue to learn more about the front-end! To learn more about the future and trend of this profession, we will build a front-end world view for ourselves so that we will not lose our way after learning it!

I do not know which third-party class libraries and frameworks should I learn. Is JQ outdated? Do you need to learn? I don't know. I don't need to worry about it either. Let's play with native first! You should know it in the future!

In practice, the following is the code and demo,

I can't learn the object-oriented method of my predecessors. I can only write some functions! (The image is from the network. You can also switch a 300*200 image to view the effect. Click the 'gradual output' button)

<! DOCTYPE html> 
In the beginning, I first thought, how can we achieve this: Don't we use the timer to change the image and change the opacity of the image during the transfer?
I. html layout is relatively simple:

<ul id="slide-nav"> </ul><div id="slide-main" class="slide-content1">    <a class="a-img" title="" href="" target="_blank">      <div>              </div>    </a>    ...</div>...
Slide-info is used to display the image title, slide-nav is a digital button, and slide-main is the image container, which contains the image link,
Li is not written in the label, because it is dynamically created through JS;
2. CSS style settings, as long as you experience it yourself, you can understand it. Note:
• Add the parent element to border before you deploy it yourself.
• Many tags, such as ul li, have padding by default. All tags must be set to 0;
*{ margin: 0; padding: 0; list-style: none; text-decoration: none; }
Height: 25px; and line-height: 25px; two values are equal to each other, so that the word can be centered.
Z-index is only relative to your brother and child. It is not valid for the relatives. If you want to display it in front of the relatives, set the ancestor of the relatives, for example, if your grandfather is Prime Minister and your second grandfather is a farmer, then the identity of all of you in your family is more honorable than that of all of you.
• Position: absolute; it is also related to his father-in-law. If his father-in-law does not set a position, he cannot hold on to it. Then he will continue to find the position until he finds it and then locate it based on him!
• If you want to achieve the effect from the right to the left, remember font-size: 0; clear the gap between the images, so that the images can be side by side!
As the saying goes, you can control the layout only when the CSS foundation is solid! For example, the following dual-flying wing layout can be achieved without positioning:
<!DOCTYPE html>
Iii. Code Implementation
Outline:

Var sufuImageScrooller = function () {function getById (id ){...} // function setOpacity (elem, level ){...} // sets the transparency function hide (img ){...} // fade in function show (omg ){...} // fade out function inOutModel (nums, navId, imgContainerId, imgInfoId, delay ){...} // main function body return {inOutModel: inOutModel ,...}} ();
SufuImageScrooller can be used to call the inOutModel method. sufuImageScrooller. inOutModel (5, 'slide-nav', 'slide-main', 'slide-info', 3500 );
InOutModel (nums, navId, imgContainerId, imgInfoId, delay) parameter: Number of likes created by nums, which must correspond to the number of images. navId digital button container id and imgContainerId image container id, the imgInfoId displays the title information id of the image. delay specifies the delay time for switching the image;
When the outline is written out, more than half of it is completed. The others are the implementation of the specific code. I am not writing very well. I can only say that this function has been implemented, and you may think about it yourself, if you have any good suggestions, please submit them;
Starting from the inOutModel function, and then stepping into it step by step, the key is to work out it. It is not that profound to see it!
Now, let's take a look at this step. If you don't need to repeat the documentation API, you can leave a message to ask me.
The above native JS achieves the carousel effect + the feeling of the preschool end (to prevent others from getting angry) is all the content that I have shared with you. I hope to give you a reference and support for more customers.