jquery animation 4. Upgraded version of the picture corridor with mask effect--with automatic running effect_jquery

The main changes are: abstracting the 'next' and 'previous' click events into a function showNext. Add setInterval and add hover event of selector element. Okay, let’s look at them one by one.
showNext function:

The reason why we need to extract him is Because it is also used in the setInterval below, we don’t want to have too much duplicate code, so we need to extract it for unified management. Next let's look at setIntervale.

In fact, it is to add a loop function, and run the showNext function every few seconds to display the next picture. One thing to note here is the calculation of the interval time. Do you still remember the interval set for the animate object in the runTransition function in the previous chapter? Horizontal display is set to slow, which is 600 milliseconds. The vertical display setting time of each frame is 150 milliseconds, and there are config.multi frames in total. (config.multi * 150) is definitely greater than 600, so we take (config.multi * 150) as the time standard here. In order to prevent the next image from being displayed as soon as the animation is finished, we added an additional 3 seconds.

After adding the loop function, we add a hover event for the selector object. When the mouse moves to the object, the interval is moved out, and the interval is added when the mouse moves out.

What we should note here is that we pass the object created by setInterval to config.interval. This is done to ensure that the loop function created in the previous step, the deleted loop function and the deleted loop function are the same object. It is very taboo to pass the object created by setInterval directly to an undeclared interval, like this:

When doing this, it is passed to the interval of the window object, which can easily cause code conflicts. For example, if a setInterval object is created in other code or plug-ins and passed to interval (equivalent to window.interval), then the clearInterval of our plug-in will affect the normal operation of other people's code, and the same applies to other people's code. It will also affect us.

Finally, for the robustness of the code, we added the following code to createOverlay to ensure that there is only one mask layer at the same time:

Okay, everything that needs to be explained has been explained. Let’s get down to it. Let’s demo to see the effect.
Demo download address: jQuery.animation.tranzify_improve.js