Page 1/3 of codes for creating maintainable slides using JavaScript

Step 1: Analizing the problem)
To create a good script, the first step should be to analyze what you want to do: we want to create a slide effect for a photo, and we want to maintain it conveniently.

How to Create a slide

There are several ways to have slides on a website:

Include all images in the document.
This is a safe option when it runs in a non-JavaScript state. In addition, when the page is loaded, all images will also be loaded. However, this method only applies to a small number of images.

The document contains the first image and a server-side script for creating the slides.
This is quite safe, but it is very annoying for end users-because I don't want to load the entire page, just want to get the next picture. However, this method is effective for page display and AD click, which is why a large number of news sites use this method.

Include the first image in the document and load other images as needed.
This method must depend on JavaScript and have a JavaScript array that maintains the photo list. You also need to provide a loading indicator to show what is happening to the user.

In our case, we take the following picture list and use the forward and backward buttons to turn it into a slide effect, and an indicator tells us, which of the total number of photos is currently displayed.


<Ul id = "slideshow">
<Li> </li>
<Li> </li>
<Li> </li>
<Li> </li>
<Li> </li>
</Ul>
The final output will look like the slide effect in the example.

Dependency check

Here we have some elements that depend on JavaScript generation: Text indicator and forward and backward links. To maintain the availability of our solutions, we need to ensure that:

These elements should appear only when JavaScript is available (users trust the features we provide to them. A link does not violate users' trust in us.
Interactive elements should be available regardless of the input device (so that we do not depend on whether the user has a mouse or not.
Images should not be hidden Unless users can access them again. Technically, only the first image is displayed, and there is no forward or backward link, which is a reserved return method. But why do users only need to see the first image after downloading it?
Step 2: Planning the Script)
Once you have evaluated the problem and selected the solution you want to use, you can start planning the script. Essentially, our scripts should do the following:

Check whether the slide list exists and contains some images (is there a reason to create a slide effect for an image ?).
Hide all the photos, but not the first one.
Create a link between the forward and backward links and an indicator that shows where we are.
Add an event handler to increase or decrease the number of currently displayed images.
Make sure that the slide effect is not out of the range. When the image number is smaller than 0, it should be changed to the last image, which in turn is similar.
Different Functions

We have some methods to solve this problem. One of them is to use DOM to traverse each LI entry and hide it. In this event listening function, we first hide the previously displayed LI (if any) and display the current LI.

Note: it makes more sense to show and hide LI, which replaces the image, because it allows the maintainer to add other elements on each slide, such as some titles.

The problem with this method is that we make the necessary style changes in JavaScript, which means that if there is a need to change the style changes from block to none in our script just now, will make the script more messy (not separated from the behavior ).

Style left to CSS parser

A more concise method is to leave all appearance changes (hide some items after all list items are downloaded) to the CSS parser of the browser. In our example, we can use a CSS rule in the slide to easily hide all list items and rewrite the style of the current entry with a specific class.

HTML:


<Ul id = "slideshow">
<Li> </li>
<Li> </li>
<Li> </li>
<Li> </li>
<Li> </li>
</Ul>
CSS:


# Slideshow li {
Display: none;
}
# Slideshow li. current {
Display: block;
}
The only problem is that if we make CSS and JavaScript unavailable, visitors will never be able to access other images. Therefore, we need to apply these styles only when JavaScript is available. Tip: When JavaScript is available, apply the class on the UL of the slide, for example, js. This allows us to display the effect only when JavaScript is available, through simple modification in CSS:

CSS:


# Slideshow. js li {
Display: none;
}
# Slideshow. js li. current {
Display: block;
}
The hook of this class can also be used to provide a completely different appearance for the static and dynamic versions of the slides.

All of our scripts need to show and hide the current and previous photos by removing or adding the current class.

To ensure that our scripts will not affect other scripts on the same page, we will create a main object and construct all the methods and properties on it. This ensures that our init () function will not be overwritten or overwritten by any other function with the same name.

JavaScript:


Slideshow = {
Current: 0, // current slide code
Init: function (){
// Initialize and set the event processing function
},
Show: function (e ){
// Event listener
}
}
Step 3: basic Tools)
Now we have a framework for planning and building our scripts. It is time to think about some tools and methods we need to accomplish this function. The help library of DOM scripts should include:

A Method for registering Event Handlers. We will use the addEvent () method of John Resig currently.
Add and remove CSS style names.
A method that overwrites the default behavior of HTML elements. We do not want to see the target page of the link, but only execute the script.
We add these tools and methods to the main objects and prepare to start:

JavaScript:


Slideshow = {
Current: 0, // current slide code
Init: function (){
// Initialize and set the event processing function
},
Show: function (e ){
// Event listener
},
AddEvent: function (obj, type, fn ){
If (obj. attachEvent ){
Obj ['E' + type + fn] = fn;
Obj [type + fn] = function (){
Obj ['E' + type + fn] (window. event );
}
Obj. attachEvent ('on' + type, obj [type + fn]);
} Else
Obj. addEventListener (type, fn, false );
},
RemoveClass: function (o, c ){
Var rep = o. className. match (''+ c )? ''+ C: c;
O. className = o. className. replace (rep ,");
},
AddClass: function (o, c ){
Var test = new RegExp ("(^ | \ s)" + c + "(\ s | $)"). test (o. className );
If (! Test) {o. className + = o. className? ''+ C: c ;}
},
CancelClick: function (e ){
If (window. event ){
Window. event. cancelBubble = true;
Window. event. returnValue = false;
}
If (e & e. stopPropagation & e. preventDefault ){
E. stopPropagation ();
E. preventDefault ();
}
}
}
When the document is fully loaded, the first thing is to execute the init () method: