The main change points are: the ' next ', ' previous ' Click events are abstracted into a function shownext. Add setinterval to add the hover event for the selector element. All right, we'll look at each of them.
Shownext function:
Copy Code code as follows:
Display function
function Shownext (flag) {
Hide Navigation
$ (config.selector). Find (' a '). css (' Display ', ' none ');
Create a mask
$.tranzify.createoverlay (config);
Get a picture of the current display status
var currimg = $ ('. ' + Config.visibleclass, $ (config.selector));
if (flag = = True) {
The current picture is not the first picture
if (Currimg.prev (). Filter (' img '). Length > 0) {
To set the previous picture to display status
Currimg.removeclass (Config.visibleclass). Prev (). addclass (Config.visibleclass);
} else {
Set the last picture to be displayed
Currimg.removeclass (Config.visibleclass);
$ (config.selector). FIND (' img '). EQ (imgLength-1). addclass (Config.visibleclass);
}
} else {
The current picture is not the last picture
if (Currimg.next (). Filter (' img '). Length > 0) {
Set the next picture to show status
Currimg.removeclass (Config.visibleclass). Next (). addclass (Config.visibleclass);
} else {
Sets the first picture to be displayed
Currimg.removeclass (Config.visibleclass);
$ (config.selector). FIND (' img ')-eq (0). addclass (Config.visibleclass);
}
}
Run Matte effect
$.tranzify.runtransition (config);
}
The reason is to draw him out, because the following setinterval inside also want to use it, do not want to have too many duplicate code, so it is necessary to extract, so unified management. Next we'll look at Setintervale.
Copy Code code as follows:
Set Loop function
Config.interval = SetInterval (Shownext, (Config.multi * 150) + 3000);
Actually is to add a loop function, each how many seconds, run once Shownext function, display next picture. One thing to note here is the calculation of the interval time. Remember the time interval that you set for the Animate object in the Runtransition function in the previous chapter? The landscape display is set to slow, which is 600 milliseconds. The vertical display setting for each frame is 150 milliseconds, with a total of config.multi frames. (Config.multi * 150) must be greater than 600, so here we take (Config.multi * 150) as the time standard. To prevent the animation from just running out, we then display the next picture, and we added an extra 3 seconds.
After adding the loop function, we add the hover event for the Selector object, move out of the interval when the mouse moves over the object, and add interval when the mouse moves out.
Copy Code code as follows:
Move the mouse over the object, remove the loop function, move the mouse out, add the loop function
$ (config.selector). Hover (function () {
Clearinterval (Config.interval);
}, function () {
Config.interval = SetInterval (Shownext, (Config.multi * 150) + 3000);
});
What we should note here is that we have passed on the objects created by SetInterval to Config.interval. Doing things like this. To ensure the loop function created in the previous step, the deleted loop function and the deleted loop function are the same object. It is taboo to pass the object created by SetInterval directly to the interval without a declaration, like this:
Copy Code code as follows:
Interval = SetInterval (Shownext, (Config.multi * 150) + 3000);
When you do this, you pass him to the interval of the Window object, which can easily cause code conflicts. For example, if you have another code or plugin, you create a SetInterval object, Also passed to the interval (equivalent to window.interval), that our plug-in clearinterval will affect the normal operation of other people's code, the same people's code will affect us.
Finally, for the robustness of the code, we added the following code to Createoverlay to ensure that there was only one mask layer:
Copy Code code as follows:
To determine if there are any tweened animations that have not been run, end the animation immediately, and remove the object
var Transoverlay = $ (' # ' + Config.containerid);
if (Transoverlay) {
Transoverlay.stop (True, true);
Transoverlay.remove ();
}
Well, need to explain the object are finished, we still directly under the demo to see the effect bar.
Demo Download Address: jQuery.animation.tranzify_improve.js
