Plugin! Plugin! I hear people asking for this plug-in and that plug-in every day. Of course, using third-party plug-ins can greatly improve development efficiency, but as a novice, I still like to implement it myself, mainly because I have time!
Today I will share with you how to write pictures carousels using native JS
Seniors can ignore the following nonsense:
Before starting, let me talk about my experience of learning front-end to now. It should be about two months today. It basically takes 6-10 hours of study time every day, purely self-study, and it is said that the training is not reliable! I am currently learning only three major items (HTML5, CSS3, Javascript), and all other knowledge is still ranked behind the learning plan... I am in a period of confusion, and I don’t know what to learn first! No matter what, let’s just sort out the three major items first. If you have any good suggestions, I hope you can give me some advice!
From HTML5 to CSS3, I felt that the front-end was quite simple, so I felt a little confident and motivated. Then I learned JS. I used to learn C# and Apple’s swift. They are both object-oriented and strong languages, which are relatively advanced. However, I still like front-end, so I turned here and started to learn JS. It was easy, but I felt that this language was a bit messy and different from others! There are some things that are not easy to understand in the authoritative guide. If you can’t do it, just look more on Baidu and look more at other people’s understanding of concepts such as closures and prototypes, and gradually you can master them. At this stage, you may have gradually realized that the front-end includes a lot of things! There are a bunch of third-party libraries, frameworks, etc., and many other things. In short, new nouns keep popping up in front of your eyes. Some say that this is going to be outdated and that is about to be mainstream, which is so chaotic! Very messy! How should I go next? What to learn first? What to learn later?
I am currently at this stage. Sometimes I can’t stand watching anything for two consecutive days, can’t sleep, and feel upset, that is, I’m obsessed with it!
I just thought, what's wrong with me? I can't figure it out! Forget it, take a break and exercise your body! Just go for a run and wander around! While thinking: How to get yourself back into the state!
Later I did this: Give yourself some candy! (Make some simple examples by yourself)
I found that the candy is so sweet that I can actually make it! The sense of accomplishment is leisurely and the motivation is full! I just wrote one instance after another. If I don’t understand or are not familiar with the API, I will translate the document (I will write it myself before reading other people’s code, and I will read it again if I really can’t). Gradually, I felt that I was really back and started to get on track!
I also took a look at what kind of people most of the companies that are currently recruiting front-end companies need, and then made a new study plan for myself. Of course, because I have time now, I want to take some time to consolidate the three major foundations first, practice more, and then go back and read the documents again to understand their basic and internal principles! No matter what you learn next, it will be much easier to get started! At the same time, continue to understand the front-end more! To understand the prospects and direction of this profession is to establish a front-end worldview for yourself, so that you will not lose your direction when you learn!
As for which third-party libraries and frameworks should be learned, I don’t know at the moment. Is JQ outdated? Do you need to learn? I don’t know, so I don’t care about it anymore, just play with the native one first! You should know naturally in the future!
The actual combat begins, the following is the code and demonstration.
I can’t learn the object-oriented writing method of my seniors at the moment, so I can only write some functions, haha! (The picture comes from the Internet. You can also cut a 300*200 picture yourself to view the effect. Click the 'Grade and Out' button to start)
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title></title> <style> *{ margin: 0; padding: 0; list-style: none; text-decoration: none; } #slide{ position: absolute; top: 100px; left: 50px; width: 300px; height: 200px; border: 1px solid gray; } #slide .blog-name{ display: block; position: absolute; bottom: 0; left: 0; width: 100%; height: 25px; line-height: 25px; background-color: rgba(155,155,155,0.5); z-index: 4; cursor: pointer; text-indent: 3px; } #slide-nav{ position: absolute; right: 5px; bottom: 5px; z-index: 5; } #slide-nav li{ display: inline-block; width: 16px; text-align: center; line-height: 16px; border-radius: 5px; cursor: pointer; overflow:hidden; } #slide-nav li:hover,.selected{ background-color: #336699; color: white; } .slide-content1{ position: absolute; width: 300px; height: 200px; font-size: 0; } .slide-content1 a{ position: absolute; cursor: pointer; } .slide-content1 a:visited{color: black;} #model-btn{ position: absolute; top: -25px; font-size: 20px; } </style> <script> window.onload = function(){ var sufuImageScrooller = function(){ //Several tool functions function show(img){ var id; for ( var i = 0; i <= 21; i++) { var op = i * 5; id = setTimeout(function(e) { setOpacity(img, e) }.bind(this,op), i * 50); } clearTimeout(id); } function hide(img){ var id; for ( var i = 0; i <= 21; i++) { var op = 100 - i * 5; id = setTimeout(function(e) { setOpacity(img, e) }.bind(this,op), i * 20); } clearTimeout(id); } function getById(id){ return document.getElementById(id); } function setOpacity(elem,level){ if(elem.filter){ elem.style.filter = "alpha(opacity=" + level + ")"; //Compatible with IE }else{ elem.style.opacity = level/100; } } //(Advanced and progressive mode) body function function inOutModel(nums,navId,imgContainerId,imgInfoId,delay){ //Prevent multiple clicks of the mode selection button to create more li if(getById('slide-nav').childElementCount !== 0){return} //Create navigation button var nav = []; var targetIdext = 0; //Save picture status information var currentIdext = 0; //Save picture status information var frag = document.createDocumentFragment(); for(var i=0;i<nums;i++){ nav[i] = fragment.appendChild(document.createElement('li')); //appendChild method will return the li nav[i].innerHTML = i+1; } getById(navId).appendChild(frag); //Initialize to display the first image var imgs = getById(imgContainerId).getElementsByTagName('a'); var info = getById(imgInfoId); info.innerHTML = imgs[0].title.slice(0,12)+'...'; nav[0].className = 'selected'; //Dynamic change of li's className to change its style for(var j=1;j<nav.length;j++){ setOpacity(imgs[j],0); } //Start automatic carousel var id; function start(delay){ id = setInterval(function(){ hide(imgs[cureentIdext]); nav[cureentIdext].className = ''; if(targetIdext<nums-1){ targetIdext ++; }else{ targetIdext = 0; } humentIdext = targetIdext; show(imgs[targetIdext]); nav[targetIdext].className = 'selected'; info.innerHTML = imgs[targetIdext].title.slice(0,12)+'...'; },delay); } start(delay); //Add event for each navigation button for(var k=0;k<nav.length;k++){ nav[k].onclick = function(event){ var e = event||window.event; //Compatible with IE var t = event.target||event.srcElement; //Compatible with IE var idex = parseInt(t.innerHTML)-1; console.log('idex:'+idex+' t:'+targetIdext+' c:'+cureentIdext); if(idex === humen[cureentIdext]); nav[cureentIdext].className = ''; humenIdext = idex; show(imgs[idex]); nav[idex].className = 'selected'; info.innerHTML = imgs[idex].title.slice(0,12)+'...'; } } getById(navId).onmouseover = function(){clearInterval(id)}; getById(navId).onmouseout = function(){start(delay)}; } //From right to left mode function fromRightModel(nums,navId,imgContainerId,imgInfoId,delay){ alert('Blogger is lazy, forgot to implement this function! Please leave a message if you need it!'); } function fromTopModel(nums,navId,imgContainerId,imgInfoId,delay){ alert('Blogger is lazy, forgot to implement this function! Please leave a message if you need it!'); } return { inOutModel: inOutModel, fromRightModel: fromRightModel, fromTopModel: fromTopModel: fromTopModel, getById: getById } }(); sufuImageScrooller.getById('model-btn1').onclick = function(){ sufuImageScrooller.inOutModel(5,'slide-nav','slide-main','slide-info',3500); }; sufuImageScrooller.getById('model-btn2').onclick = function(){ sufuImageScrooller.fromRightModel(5,'slide-nav','slide-main','slide-info',3500); }; sufuImageScrooller.getById('model-btn3').onclick = function(){ sufuImageScrooller.fromTopModel(5,'slide-nav','slide-main','slide-info',3500); }; }; </script></head><body><div id="slide"> <a id="slide-info" href="http://www.cnblogs.com/susufufu/" target="_blank"> Sufu's Blog</a> <ul id="slide-nav"> </ul> <div id="slide-main"> <a href="http://www.cnblogs.com/susufufu/p/5749922.html" target="_blank"> <div> <img src="https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=1247027539,1217965501&fm=21&gp=0.jpg"> </div> </a> <a href="http://www.cnblogs.com/susufufu/p/5768431.html" target="_blank"> <div> <img src="https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=4286855119,2694540617&fm=21&gp=0.jpg"> </div> </a> <a href="http://www.cnblogs.com/susufufu/p/5738673.html" target="_blank"> <div> <img src="https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=4042865154,1782505495&fm=21&gp=0.jpg"> </div> </a> <a href="http://www.cnblogs.com/susufufu/p/5714020.html" target="_blank"> <div> <img src="https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=2603911195,1920098549&fm=21&gp=0.jpg"> </div> </a> <a href="http://www.cnblogs.com/susufufu/p/5759480.html" target="_blank"> <div> <img src="https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=4104312586,1589909074&fm=21&gp=0.jpg"> </div> </a> </div> <div id="model-btn"> <input type="button" id="model-btn1" value="gradual progressive"> <input type="button" id="model-btn2" value="right to left"> <input type="button" id="model-btn3" value="top to bottom"> </div></div></body></html>At the beginning, think about how to implement it: don’t you just use the timer to change the picture and change the opacity of the picture in the cutstone?
1. HTML layout is relatively simple:
<ul id="slide-nav"> </ul><div id="slide-main"> <a href="" target="_blank"> <div> <img src="lg1.png"> </div> </a> ...</div>...
slide-info is used to display the picture title. slide-nav is a digital button, slide-main is a picture container, and the picture link is placed inside.
There is no li written in the tag because it is created dynamically through JS;
2. As long as you experience the settings of CSS styles, you will understand them. Pay attention to them:
•Before you make your own layout, it is best to add a border to the parent element, so that you can understand the scene and finally remove it.
•ul li and many other tags have padding by default, and all should be set to 0;
*{ margin: 0; padding: 0; list-style: none; text-decoration: none; }height: 25px; and line-height: 25px; two are equal, so that the characters can be centered
z-index is only relative to your brothers and children, and is invalid for relatives in the sidelines. If you want it to be displayed in front of relatives in the sidelines, set up the ancestors of relatives in the sidelines. For example, your grandfather is the prime minister and your second master is a farmer, then all the identities of your family are more noble than all the identities of your second master’s family.
•position: absolute;It is also related to his father. If his father has not set a positioning, it is unreliable, so continue to look for support until he finds it, and then rely on him to position it!
•If you want to achieve the effect from right to left, remember font-size:0; be clear about the spacing between pictures and keep the pictures shoulder to shoulder!
As the saying goes, practice makes perfect. Only when CSS is solid can you control the layout! For example, the following double wing layout can be achieved without positioning:
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title></title> <style> body{ margin: 0; padding: 0; } .header,.footer{ width: 100%; height: 50px; line-height: 50px; text-align: center; background-color: greenyellow; } .container{ overflow: hidden; *zoom: 1; } .left{ float: left; width: 100px; height: 100px; margin-left: -100%; background-color: green; } .main{ float: left; width: 100%; height: 100px; background-color: gray; } .right{ float: left; width: 200px; height: 100px; margin-left: -200px; background-color: gold; } .center{ padding-left: 100px; padding-right: 200px; } </style></head><body><div>header</div><div> <div>main-center</div> </div> <div>left</div> <div>right</div></div><div>footer</div></body></html>Implementation of code
Write the outline first:
var sufuImageScrooller = function(){function getById(id){...} //Universal get element object function setOpacity(elem,level){...} //Set transparency function hide(img){...} //Fake in function show(omg){...} //Fake out function inOutModel(nums,navId,imgContainerId,imgInfoId,delay){ ... } //Main function body return {inOutModel: inOutModel,...}}();In this way, you can call the inOutModel method through sufuImageScrooller, sufuImageScrooller. inOutModel(5,'slide-nav','slide-main','slide-info',3500);
inOutModel(nums,navId,imgContainerId,imgInfoId,delay) Parameters: nums creates the number of li, which must correspond to the number of pictures, navId digital button container id, imgContainerId picture container id, imgInfoId displays the picture title information id, delay specifies the delay time to switch the picture;
After writing the outline, it is half completed. The others are the implementation of specific details. I didn’t write very well. I can only say that I have implemented this function. Everyone thinks about it for themselves. If you have any good suggestions, please feel free to put it forward;
Start by cutting into the inOutModel function and then go deeper step by step. The key is to type it out manually. If you just look at it, you won’t have that deep experience!
Okay, that's the point. If you don't know how to translate the document API yourself, you can also leave a message to ask me
The above article "The feeling of realizing carousel effects from native JS + learning the front-end (preventing obsession) is all the content I share with you. I hope you can give you a reference and I hope you can support Wulin.com more.