Primary JS to achieve the effect of Carousel + learning front end of the feeling (prevent the obsession) _javascript skills

Plug - ins! Plug - ins! Every day to hear someone to ask this plug-in, that plug-in, of course, with Third-party Plug-ins can greatly improve the efficiency of development, but as a novice, I still like to achieve their own, mainly I have time!

Today, I'm going to share it with you. Using native JS to realize the writing of the picture carousel

Seniors can ignore the following nonsense:

Before I begin, I will learn a little about the front end to the present. Today should have two months or so, basically 6-10 hours a day of study time, pure self-study, it is said that training is not reliable! My current stage is only three piece (HTML5, CSS3, JavaScript), all the other knowledge is still in line with the study plan behind .... Is now in a confused period, do not know what to learn the following first! No matter, the first three piece a little bit more then, the predecessors if there is any good advice, hope to guide!

From HTML5 to CSS3, all the way over, feel the front end quite simple, a bit confident, dynamic, and then learn JS, before learning C #, Apple Swift, are object-oriented strong type of language, more advanced, but I still like the front end, so turned here, The beginning of learning JS also feel very easy, that is, feel the language a bit messy, and others are not the same! And there's something about the authoritative guide that doesn't make it easy to figure out no way, more Baidu, see others for some such as closures, prototypes and other concepts of understanding, and slowly can grasp the 7788, to this stage, you may have slowly learned that the original front-end it includes a lot of things! A bunch of third-party libraries, frameworks, and so on, there are a lot of other things, in short, the term continues to pop up in front of you, some say this is going to be outdated, that is about to be mainstream, good chaos! It's so messy! Where do I go next? What to learn first? After what?

I am at this stage at present, sometimes for two consecutive days can not see anything down, but also sleep, distracted, is: the Obsession!

I just thought, what's wrong with me? I don't understand! Forget it, let's take a rest and exercise your body. Just go for a run and wander around! While thinking: How to get yourself back into the state!

Then I did it: give yourself some sugar to eat! (Do some simple examples yourself first)

I found that the sugar is really sweet, I can make it! The sense of achievement is carefree and the motivation is full! I just have an example. Then an instance of the write, do not understand, the API is not familiar to turn the document (in view of other people's code before they write, it will not see), slowly, I feel really back, and began to get on the right track!

I also specifically looked at the current most recruit front-end companies need what kind of people, then I made a study plan, of course, because at the moment I have time, so I want to take a period of time out to consolidate the next 3 major Foundation, more practice, and then go back over the document, more understanding of their basic, intrinsic principles! The next step no matter what to learn, it is easy to get more! At the same time, continue to learn more about the front! To learn more about the career prospects and trends, is to create a front end of the world view, so that learning will not lose direction!

As for the third party class library, the framework, I do not know, JQ outdated it? Do you need to learn? I also do not know, also first ignore, the first play play native bar! You should know it naturally!

Start with the actual combat, the following is the code and demo,

Predecessors of the object-oriented writing, I still learn not to come, I will only write some functions, hehe! (Pictures from the network, you can also cut a 300*200 picture to see the effect, click the ' progressive Out ' button to start)

<! DOCTYPE html>  

In the beginning, think first, how to achieve: Do not use the timer to change the picture, scene change picture opacity?

First, HTML typesetting is simpler:

<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 used to show the title of the picture, Slide-nav is the number button, Slide-main is the picture container, where the picture link,

The tag does not write Li, because it is dynamically created through JS;

Second, the CSS style settings, as long as you personally to experience, you will be able to understand, attention points:

* Own layout before, it is best to add the parent element border, such a scene clear, and finally remove

ul Li and many other labels by default are padding, all to set it to 0;

*{margin:0; padding:0; list-style:none; text-decoration:none;}

Height:25px and line-height:25px; two equal, you can make the word center

Z-index only relative to your brother and son, for the relatives of the adjacent system is not valid, if you want it to show in front of relatives in the next department, set up the ancestors of relatives, such as your grandfather is the prime minister, your two ye are farmers, then you are all the identity of your family than your two master's identity are all noble

Position:absolute is also related to his parents, parents did not set positioning, unreliable ah, then continue to look for rely on until found, and then rely on him to locate!

• If you want to achieve right-to-left effects, remember the font-size:0, clear the spacing between the pictures, and let the pictures shoulder by side!

As the saying goes, practice makes perfect, only the CSS Foundation is solid, can control good layout! For example, the following twin wings layout, do not need to be positioned to achieve:

<! DOCTYPE html>  

Third, the implementation of the Code

First write the outline:

var sufuimagescrooller = function () {
function GetByID (ID) {...}/Universal Get Element Object
function SetOpacity (elem,level) { ...} Set Transparency
function Hide (img) {...}//Fade function show
(OMG) {...}//Fade
function Inoutmodel (Nums,navid, Imgcontainerid,imginfoid,delay) {...}//main function body return
{
Inoutmodel:inoutmodel,
...
}
} ();

This way of writing can be sufuimagescrooller to call the Inoutmodel method, Sufuimagescrooller. Inoutmodel (5, ' Slide-nav ', ' slide-main ', ' slide-info ', 3500);
Inoutmodel (nums,navid,imgcontainerid,imginfoid,delay) parameter: Nums Create the number of Li, must correspond to the number of pictures, navId number button container ID, Imgcontainerid picture container id,imginfoid Display Picture title information Id,delay Specify the switch picture delay time;

Outline written out, the completion of the half, the other is the specific details of the implementation of the code, I write is not very good, can only say that the realization of this function, we think, if there are good suggestions welcome to propose;
Starting from the Inoutmodel function, and then step by step, the key is to fight out, the light to see the words do not feel so deep!

Well, this is the introduction to this step, do not have to turn over the document API, you can also leave a message to ask me

Above the original JS to achieve the effect of the Carousel + Learning Front end (to prevent the obsession) is a small series to share all the content, hope to give you a reference, but also hope that we support the cloud habitat community.