First step: Analyze the problem (analizing the problem)
To create a good script, the first step should be to analyze what you want to accomplish: we want to create a picture of the slide effect, and we want to maintain the convenience of maintenance.
How do I create a slide effect
There are several ways to have slides on a Web site:
Include all the pictures in the document.
When he runs in no JavaScript state, this is a safe choice. Also, when the page is loaded, all the pictures will be loaded. However, this approach applies only to a small number of pictures.
Contains the first picture in the document, and there is a server-side script that creates the slide feature.
This is also quite safe, but for the end user, it's very annoying-because I don't want to load the entire page and just want the next photo. But it's more effective for page display and ad clicks, which is why a lot of news sites use this method.
Include the first picture in the document, and load the other pictures as needed.
The way you get bored with this approach is that you have to rely on JavaScript and have a JavaScript array that maintains a list of photos. You also need to provide a load indicator to show the user something is happening.
In our case, we take the following picture list, use the forward and backward buttons to turn him into a slideshow, and an indicator tells us which picture in 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 checking
We have some elements here that depend on JavaScript generation: text indicators and forward and down links. To maintain the usability of our solutions, we need to make sure that something:
These elements should appear only when JavaScript is available (users rely on the functionality that we provide to them). A link that can't do anything to violate the user's trust in us.
Interactive elements should be available regardless of the input device (let's not rely on whether the user has a mouse).
Images should not be hidden unless users can access them again. Technically, only the first picture is displayed, and no forward and backward links are reserved for retreat, but why should users have downloaded all the pictures only to see the first one?
Step Two: Planning scripts (Planning the script)
Once you've evaluated the problem and picked out the solution you want to use, you can start planning the script. In essence, our script should do this:
Check to see if the slide list exists and include some pictures (is there any reason to create a slide effect for a picture?). ）。
Hide all the photos, but not the first one.
Create forward and backward links, and an indicator of where we are.
Add an event handler to increase or decrease the number of the current picture displayed by the link.
Make sure that the slide effect is not out of range, and that when the picture number is less than 0, he should be the last picture, which in turn is similar.
Different functions to deal with
We have some ways to deal with this problem. One of them is to use the DOM to traverse each LI entry and hide him. In this event listener function, we first hide the previously displayed LI (if any) and display the current one.
Note: It is more meaningful to show and hide LI instead of pictures because he allows defenders to add other elements to each slide, such as some titles.
The problem with this approach is that we do the necessary style changes in JavaScript, which means that if there is a need to change the display from block to none more complex style changes in our script, it will make the script more cluttered (without separating performance from the behavior).
Style left to CSS parser
A more concise approach is to leave all appearance changes (hidden after all list items have been downloaded) to the browser's CSS parser. In our example, we can use a CSS rule in a slide to easily hide all of the list items and rewrite the current entry style 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 pictures. Therefore, we need to apply these styles only when JavaScript is available. The trick is to use class on the UL of slides, such as JS, when JavaScript is available. This allows us to display the effect only when JavaScript is available, by simply modifying it in the CSS:
Css:
#slideshow. js li{
Display:none;
}
#slideshow. js li.current{
Display:block;
}
This class hook can also be used to provide a completely different look for the slide's static and dynamic versions.
All we have to do is to show and hide the current and previous photos by removing or adding the class of present.
To ensure that our script will not affect other scripts on the same page, we will create a primary object and construct all of the methods and properties on it. This ensures that our init () function will not be overwritten or overwritten with any other function of the same name.
Javascript:
Slideshow = {
current:0,//Current slide code
Init:function () {
Initializing and setting event handler functions
},
Show:function (e) {
Event listeners
}
}
The third step, the basic tool method (essential tools)
Now we have the framework to plan and build our scripts. It's time to think about some of the tools we need to complete this function. In the case of minimum requirements, the Help library for DOM scripts should include:
A method for registering event-handling functions, we will now use the Addevent () method of John Resig.
Methods for adding and removing CSS style names.
A method that overrides the default behavior of HTML elements. We do not want the target page of the link to appear, but only execute the script.
We add these tool methods to the main object and are ready to start:
Javascript:
Slideshow = {
current:0,//Current slide code
Init:function () {
Initializing and setting event handler functions
},
Show:function (e) {
Event listeners
},
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 to do is to execute the init () method:
Current 1/3 page
123 Next read the full text
