Thinking in the production of focus graphs

Some days ago should write this article, but has been lazy, today or summed up the problems encountered before, on the one hand to recall the situation at that time, see if there will be other gains, on the other hand, it is convenient to review their own later. The first contact with the carousel is the normal version (not infinite carousel), five pictures corresponding to five small squares, auto-cycle, this version in the last switch to the first when there is a noticeable jump, experience is not good, then I want to follow the way of infinite scrolling subtitles, in the back to add five of the same picture, Two sets of dynamic switch, a set of broadcast finished, automatically inserted into the second group behind.

This idea has a problem, if the user manually upward switch, that from the first tune to the last one, there will still be a noticeable jump, that is, you need to add five images in front.

Think about this method is too stupid, in order to sow five pictures, altogether used 15, very not economical. Later saw a MU class network tutorial, the method is provided in the end of each plus a picture, the first front plus the last picture, the last one after the first picture, so that a total of seven pictures to be done. When the picture is switched to the first chart, jump to the sixth chart, and again, when the picture switches to the seventh, jump to the second picture immediately, because the two images are the same, so there is no visual change.

In accordance with this idea, I began to do with the original JS written version, this writing is actually the last version of the basic on the basis of the code, looking at this one months ago, feel a lot of places are not pleasing to the eye, although now the code is still very frustrated, I based on the principle of best practice, slightly optimized code, shortened the statement, Decoupled application logic and event handlers. I am by the impression of writing, and then the original code compared to this writing, in the process of writing I encountered the following problems, these have encountered before, but did not care, directly skipped, this time took some time to understand:

1. After the function name with parentheses and without parentheses, I created a function through the function declaration, ready to bind him to the MouseOver event, at first I habitually write

Oul.onmouseover = Stop ();

Found that there is a problem, there is no effect I want to see the original code, the original stop should not add parentheses, I think of the addition of parentheses is a difference, but what is the difference I do not know, check a circle, the conclusion is not parenthesized is a function pointer, do not execute the function, The parentheses are the result of executing the function, what is needed here is to assign the function pointer to the event, it is convenient to call when needed, not to execute the function now, so should not be parentheses, so should be

Oul.onmouseover = stop;

2. The central idea of the carousel is to change the left value of the picture, I put the rest of the work done, but found that the picture does not move, find to find the code is right ah, call the big uncle, go to look at the HTML code, found here a little something, set the left initial value, This lesson has made me pay more attention to the initialization of parameters.

<ul id= "banner_imgsstyle=" left: -800px; " >

3. This problem compared to the pain, originally five map corresponding to five small squares, now more run out of two graphs, need to be modified, because the previous code understanding is not deep, so the change is always not, I always want to put the small box for the parameter I in the loop directly to the picture,

 for(varI=0, olen=oa.length;i<olen;i++) {Oa[i].onclick=function () {if(Mark) {return; }                if(Hasclass ( This," Now")) {                    return; }                varMyindex =i; varoffset =-picwidth* (myindex-index);                Animate (offset); Index=Myindex;            Getchange (); }        }

Found no! No way I alert a bit myindex, found that he actually equals the length of OA, toss to toss to go, is not, at that time to see the tutorial is in the small box of HTML to add an index property, and then used here, but I do not think the emphasis on the structure and behavior of the separation, this is not scientific ah. But after a long time or not, can only yield, using the method of the tutorial, which left a lump in my heart.

<a index="1"href="javascript:;" class=" Now"></a> <a index="2"href="javascript:;"></a> <a index="3"href="javascript:;"></a> <a index="4"href="javascript:;"></a> <a index="5"href="javascript:;"></a>

Today, when I look at this code again, why not use the For loop to add the Index property to the a tag dynamically, because the tutorial uses getattribute () to get it, so I was just starting to think about using setattribute () to add the Index property, and then think about it, You can also add properties directly, so it's written as

var this. index;

Found no problem, take a closer look, this formula has seen several times elsewhere, did not quite understand what to do, and now notice that this is to copy the index of each element to his own attributes, so that it can be used normally. So the JS version will be able to run normally.
Writing the jquery version is a lot smoother, just because there are few jquery, so you're not familiar with selectors and related methods, and sometimes you need to look at the data. Total feeling is a lot of practice is really good, many problems only in the practice will be to think, to really understand, reading or video for a lot of problems understanding will not be so profound, many think understand, also may not really understand, so still want to find more project practiced hand just good.

Thinking in the production of focus graphs