jQuery corps background-image rotator
Pour un site, je suis actuellement à la conception, je voudrais avoir le corps d'arrière-plan sur une rotation d'un tableau d'images. J'ai essayé de plusieurs façons, par exemple en utilisant le fadeIn() et fadeOut() fonctions mais ils semblent affecter l'opacité de la les divisions au sein de l'organisme. J'ai aussi essayé d'utiliser bgStretcher Mais cela a provoqué l'apparence des questions et fait le site web lent et saccadé.
Je voudrais de préférence, comme les images de fade in et fade out.
De l'aide serait appréciée,
Voici un lien vers le site
Le fichier de script que j'ai actuellement ont été la modification est appelée background.js en vertu de l' /js/répertoire. Le fichier est actuellement en commentaire que C'est seulement expérimentale.
Les deux images d'arrière-plan "images/bg/bg1.jpg" et "images/bg/bg2.jpg"
Voici mon code actuel qui je suis en train d'essayer de se mettre au travail:
$(document).ready(function() {
setInterval(switchImage, 5000);
switchImage();
});
function switchImage()
{
$('body').css("background-image", "url(../images/bg/bg2.jpg)").fadeIn(1000);
$('body').css("background-image", "url(../images/bg/bg1.jpg)").fadeOut(1000);
}
Une fois que je peux comprendre comment la transition entre les images d'arrière-plan, je peux simpily ajouter un peu de changement entre un tableau d'images.
Acclamations, Le Danois Wilson
OriginalL'auteur Dane Wilson | 2012-06-02
Vous devez vous connecter pour publier un commentaire.
Très simple avec ce Plugin jQuery: jQuery Backstretch
Dans les démos "à l'Aide de Backstretch dans un Diaporama" est un code-extrait.
OriginalL'auteur doptrois
Cela peut être fait avec css3. Je vais poster un violon bientôt.
EDIT: j'ai essayé de faire une animation avec des images clés et CSS3 de fond de taille, mais apparemment, ils ne veulent pas travailler ensemble trop bien (flickerings). Probablement mieux regarder dans jQuery alors.
OriginalL'auteur Bram Vanroy