SO jQuery Fiddle
Test Fiddle mainly for SO Questions jQuery 1.4.3, UI 1.8.5
HTML
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.5/themes/ui-lightness/jquery-ui.css">
<div id="slidesPartenairesHome"></div>
CSS
#slidesPartenairesHome {
background-size: contain;
background-position: center center;
background-image: url('http://www.jpl.nasa.gov/spaceimages/images/mediumsize/PIA17011_ip.jpg');
width: 300px;
height: 170px;
margin-left: 120px;
}
JavaScript
window.setInterval(function(){
var url = getCurrent();
$('#slidesPartenairesHome').delay( 500 ).fadeTo(500, 0.3, function()
{
$(this).css('background-image', 'url(' + url + ')');
}).fadeTo('slow', 1);
}, 1000);
var index = 1;
var arrayOfPartenaires = [
"http://www.jpl.nasa.gov/spaceimages/images/mediumsize/PIA17011_ip.jpg",
"http://static.guim.co.uk/sys-images/Guardian/Pix/pictures/2014/4/11/1397210130748/Spring-Lamb.-Image-shot-2-011.jpg",
"http://cdn.sstatic.net/stackoverflow/img/[email protected]?v=hiFacebook"
];
function getCurrent(){
if (index > arrayOfPartenaires.length -1){
index = 0;
}
var returnValue = index;
index ++;
return arrayOfPartenaires[returnValue];
}