Timing switching of web background images

When we do the page effect, we often encounter UI in order to make good-looking effect, will ask the body, or div background timed switch.

If you want to do the background can be deleted or modified background map, it is absolutely not possible to use background to set the background map, because the background is no way to get rid of the path of the background URL.

So, to do the backstage can change the picture, it should be in the HTML with IMG also set the background map.

What I've been doing recently is a time-lapse effect with a div background.

Is in the head part, not only to do full screen, but also have the effect of timing rotation. Because at the beginning of doing here, I was done with background, because also do not do backstage the function of the picture, I still use background do.

I did it with jquery. Remember to import jquery before calling again, the code is as follows:

$ (function () {

(function () {

Window.timeinterval = 2000;
Window.curindex = 0;
Window.arr = new Array ();
Window.arr.push ("imgs/1.jpg");
Window.arr.push ("imgs/2.jpg");

window.changeimg = function () {

$ (". First_part"). CSS ("Background", "url (" + window.arr[Window.curindex] + ")");

Window.curindex = (window.curindex+1)% Window.arr.length;
};

SetInterval (window.changeimg, window.timeinterval);

}) (this);

});

But a few days later, I found this effect switch a bit stiff. Finally, I finally Baidu to a jquery plugin. The end result is the same, but the process will look much better than mine.

The website is: http://www.jq22.com/jquery-info86

Timing switching of web background images