JavaScript：
slideshow = {
Current:0, // Current slide encoding
init:function(){
// Initialize and set event handling functions
},
show:function(e){
// Event Listener
},
addEvent:function( obj, type, fn ) {
if ( ) {
obj['e'+type+fn] = fn;
obj[type+fn] = function(){
obj['e'+type+fn]( );
}
('on'+type, obj[type+fn] );
} else
( type, fn, false );
},
removeClass:function(o,c){
var rep=(' ‘+c)?' ‘+c:c;
=(rep,”);
},
addClass:function(o,c){
var test = new RegExp(”(^|\\s)”+c+”(\\s|$)”).test();
if(!test){+=?' ‘+c:c;}
},
cancelClick:function(e){
if (){
= true;
= false;
}
if (e && && ){
();
();
}
}
}
(window,'load',);
Step 4: Script (The Script)
Now, in the appropriate place we have all the method tools, and init() called when the window is loaded, we can start to materialize this method.
Note: This is just the init() method, not the entire script. Because of the line number, copying and pasting the script will cause an error.
1: init:function(){
2: if( && ){
3: var list = (' ');
4: if(list){
5: = ('li');
6: = ;
7: if( > 1){
8: (list, 'js');
9: (list);
10: }
11: }
12: ();
13: }
14: },
Line 2, check whether the DOM is supported.
Lines 3 and 4, try to retrieve the element with ID slideshow, and if it is not defined, the remaining method will not be executed.
Lines 5 and 6 search the list items and the number of list items, and store them in the attribute items and all respectively.
Line 7 detects whether there are too many list items, and if there are not too many, the rest will not be executed.
Line 8, add the js style class name to the list, thereby hiding the list item and the style that should be different.
Line 9, call createNav() and provide this list as a parameter.
Line 12, call show() to display the sliding door with the predefined current attribute.
The createNav() method uses the DOM script to create the HTML required for the slide to work properly.
1: createNav:function(o){
2: var p = ('p');
3: (p, 'slidenav');
4: = ('a');
5: ('href', '#');
6: var templabel = ('<<');
7: (templabel);
8: (, 'click', );
9: ();
10: = ('span');
11: templabel = ( (+1) + ' / ' + );
12: (templabel);
13: ();
14: = ('a');
15: ('href', '#');
16: var templabel = ('>>');
17: (templabel);
18: (, ‘click', );
19: ();
20: (p, o);
21: },
Lines 2 and 3, just start creating a P element to contain the entire slide navigation and apply a class called slidenav.
Lines 4 and 5 create a new link element, store it in a property called prev, and set the href attribute to #. It is necessary to make the link appear as a real link and the keyboard is available.
Line 6, create a new text tag.
Line 7, add the text tag to the link.
Line 8, add an event handler function to point to the show() listen method.
Line 9, add the new link to the paragraph.
Line 10, start the counter, we create a SPAN element and store it with the count attribute.
Line 11, create a new text node, showing the current slides in the total number. We need to add 1 to the current attribute, because the human count starts at 1 and not from 0.
Line 12, add the text as a new child node to SPAN.
Line 13, add the SPAN element to the paragraph.
Lines 14 to 19 are basically copying lines 4 to 9. The only difference between recreating the link this time is the text tag, which is stored in the next attribute.
Line 20, insert the recently created paragraph before the initial picture list in the document.
All the tags created are necessary, and the last thing left is to define a listening method called show() when the link is clicked.
1: show:function(e){
2: if(this === || this === ){
3: ([], ‘current');
4: var addto = (this === ) ? 1 : -1;
5: = + addto;
6: if( < 0){
7: = (-1);
8: }
9: if( > -1){
10: = 0;
11: }
12: }
13: var templabel = ((+1) + ‘ / ‘ + );
14: (templabel, );
15: ([], ‘current');
16: (e);
17: },
Line 1 obtains the current event object as parameter e, which is the only required cancelClick() called later.
Line 2 detects whether the clicked element is a downward or forward link (this is returned by addEvent()).
Line 3 removes the current class from the currently displayed slide. Since there is now a link to be clicked, this will be possible.
Line 4, by comparing this and next attributes, decide whether the current counter should be increased or decreased.
Line 5, correct the counter.
Lines 6 to 11, determine that the counter will never go out of range, when you are in the first slide and click the forward link, it will be set to the last one, and when you are in the last slide and click the back link, it will be set to the first one.
Lines 13 and 14, generate a new counter text and replace the old one.
Line 15 shows the new current slide by setting a class named current.
Line 16, block the default behavior of the link by calling cancelClick().
These are all about the script. Now this script works, but is still not really maintainable.
Step 5: Easing Maintenance
The script is fully functional, detached and impeccable. The real problem is that it is not convenient to maintain now.
The biggest problem with script applications is that not all maintainers understand JavaScript and are willing to find parts that need to be modified in your script.
To avoid maintainers doing this, the safest way is to separate the naming and ID used in scripts and CSS from your script functions. Additionally, it is also a good idea to isolate text tags from the scripts used, as they may change. For example, when a script is localized in another language.
Reuse of tools and methods
The first thing to do is to separate tool functions from the main script that other scripts can also be used. This may be the beginning of most JavaScript libraries.
：
/* Auxiliary method*/
tools = {
addEvent:function( obj, type, fn ) {
if ( ) {
obj['e'+type+fn] = fn;
obj[type+fn] = function(){
obj['e'+type+fn]( );
}
( ‘on'+type, obj[type+fn] );
} else
( type, fn, false );
},
removeClass:function(o,c){
var rep=(' ‘+c)?' ‘+c:c;
=(rep,”);
},
addClass:function(o,c){
var test = new RegExp(”(^|\\s)” + c + “(\\s|$)”).test();
if(!test){+=?' ‘+c:c;}
},
cancelClick:function(e){
if (){
= true;
= false;
}
if (e && && ){
();
();
}
}
}
CSS’ class and ID – Appearance
Previous page123Next pageRead the full text