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:

Copy code The code is as follows:

//Display function
function showNext(flag) {
//Hide navigation
$(config.selector).find('a').css('display', 'none');
//Create mask
$.tranzify.createOverlay(config);

//Get the 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) {
//Set the previous picture to the displayable state
currImg.removeClass(config.visibleClass).prev().addClass(config.visibleClass);
} else {
//Set The last picture is displayable
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 the displayable state
currImg.removeClass(config.visibleClass).next().addClass(config.visibleClass);
} else {
//Set the first picture The picture is displayable
currImg.removeClass(config.visibleClass);
$(config.selector).find('img').eq(0).addClass(config.visibleClass);
}
}

//Run the mask effect
$.tranzify.runTransition(config);
}

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.

Copy code The code is as follows:

//Set loop function
config.interval = setInterval(showNext, (config.multi * 150) 3000);

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.

Copy code The code is as follows:

//Move the mouse to the object and move out of the loop function; Move the mouse out and 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 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:

Copy code The code is as follows:

interval = setInterval(showNext, (config.multi * 150) 3000);

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:

Copy code The code is as follows:

//Determine whether there is a tween animation that has finished running. If it exists, end the animation immediately and remove the object.
var transOverlay = $('#' config.containerID);
if (transOverlay) {
transOverlay.stop(true, true);
transOverlay.remove();
}

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