Nel tutorial di oggi vedremo come mostrare immagini di sfondo a rotazione con jQuery.
Grazie a setInterval richiameremo la funzione changeImg ogni 5 secondi che ci permetterà di passare all’immagine successiva.

 
//—–HTML————————————————->

 
//——-JQUERY———————————————->
$(document).ready(function(){
var imgArr = new Array( // relative paths of images
‘images/headmain5.jpg’,
‘images/headmain3.jpg’,
‘images/headmain4.jpg’,
‘images/headmain2.jpg’
);
 
var preloadArr = new Array();
var i;
/* preload images */
for(i=0; i < imgArr.length; i++){
preloadArr[i] = new Image();
preloadArr[i].src = imgArr[i];
}
 
var inner = $(‘#headinner’);
var outer = $(‘#headouter’);
 
inner.css(‘background’, ‘#fff url("images/headmain5.jpg") no-repeat’);
outer.css(‘background’, ‘#fff url("images/headmain3.jpg") no-repeat’);
 
var currImg = 2;
var intID = setInterval(changeImg, 5000);
 
function changeImg() {
if(inner.is(‘:visible’)) {
var count = currImg++%preloadArr.length;
var imgSrc = preloadArr[count].src;
inner.fadeOut(‘slow’, function(){
inner.css(‘background’, ‘#fff url(‘+imgSrc+‘) no-repeat’);
});
} else {
var count = currImg++%preloadArr.length;
var imgSrc = preloadArr[count].src;
inner.fadeIn(‘slow’, function(){
outer.css(‘background’, ‘#fff url(‘+imgSrc+‘) no-repeat’);
});
}
}
 
});
 

fonte: www.sastgroup.com ? Vai al post originale