The next step is to separate the class and ID of the appearance into a separate include file. Ensure that they are safe in the slideshow namespace, because other scripts are unlikely to use them. It will not prevent a brief explanation.
：
= {
/*
These are the class and IDs used in the slide effect.
You can modify any of them here.
Be sure to use quotes to enclose the name and end with a comma (except the last one).
*/
showID :'slideshow',
dynamicClass :'js',
slideNavigationClass :'slidenav',
currentClass :'current'
}
Text labels - Interpreted to end users
Last but not least, let's put the text tag into a separate include file and use the slideshow namespace again.
：
= {
/*
These are all text labels used in slide effects.
You can modify any of them here.
Be sure to use quotes to enclose the name.
There is no comma to the last end.
*/
previous : '<<',
next : '>>',
counterDivider : ‘ of ‘
}
The main script to change
We then need to modify the main script to use this information instead of relying on embedded data. There are not many changes, and it is easy to do it with search and replacement.
：
slideshow = {
current:0,
init:function(){
if( && ){
var list =();
if(list){
= ('li');
= ;
if( > 1){
(list, );
(list);
}
}
();
}
},
createNav:function(o){
var p = ('p');
(p, );
= ('a');
('href', '#');
var templabel = ();
(templabel);
(, 'click', );
();
= ('span');
templabel =((+1) + + );
(templabel);
();
= ('a');
('href', '#');
var templabel = (
);
(templabel);
(, 'click', );
();
(p, o);
},
show:function(e){
if(this === || this === ){
([],
);
var addto = this === ? 1 : -1;
= + addto;
if( < 0){
= (-1);
}
if( > -1){
= 0;
}
}
var templabel = ((+1) + + );
(templabel, );
([], );
(e);
}
}
(window,'load',);
All these files are needed to ensure that future maintainers can use your scripts to work without having to worry about them. The file name should be obvious, what is it, and can become a standard script over time:
Previous page123Read the full text