web-dev-qa-db-fra.com

Modification dynamique de l'image de fond CSS

J'ai déjà essayé plusieurs choses, mais jusqu'à présent, pas de chance. 

Ce que je recherche, c’est un moyen de faire changer l’image de fond de ma balise d’en-tête HTML toutes les quelques secondes Toutes les solutions sont les bienvenues, tant que ce n'est pas trop complexe.

J'ai ce code en ce moment, ainsi qu'un lien vers JQuery:

<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>

$(function() {
    var header = $(‘.mainHeader’);
    var backgrounds = new Array(
        ‘url(img/Rainbow.jpg)’,
        ‘url(img/chickens_on_grass.jpg)’
        ‘url(img/cattle_on_pasture.jpg)’
        ‘url(img/csa_bundle.jpg)’
    );
    var current = 0;

    function nextBackground() {
        header.css(‘background’,backgrounds[current = ++current % backgrounds.length]);
        setTimeout(nextBackground, 10000);
    }

    setTimeout(nextBackground, 10000);
    header.css(‘background’, backgrounds[0]);
});

Mon en-tête HTML:

<header class="mainHeader"></header>

Et CSS:

.mainHeader {
    background: no-repeat center bottom scroll; 
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    min-height: 150px;
    padding-top: 2%;
    font-size: 100%;
}

En ce moment, j'ai maintenant l'image de fond du tout.

Dans l'attente de suggestions.

javascriptjqueryhtmlcss
10
CW Design
<html>
<head>
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script>
$(document).ready(function(){
var header = $('body');

var backgrounds = new Array(
    'url(http://placekitten.com/100)'
  , 'url(http://placekitten.com/200)'
  , 'url(http://placekitten.com/300)'
  , 'url(http://placekitten.com/400)'
);

var current = 0;

function nextBackground() {
    current++;
    current = current % backgrounds.length;
    header.css('background-image', backgrounds[current]);
}
setInterval(nextBackground, 1000);

header.css('background-image', backgrounds[0]);
});
</script>
</head>
<body>
<header></header>
</body>
</html>
6
sopanha

Apporté quelques modifications à votre code

DEMO: http://jsfiddle.net/p77KW/

var header = $('body');

var backgrounds = new Array(
    'url(http://placekitten.com/100)'
  , 'url(http://placekitten.com/200)'
  , 'url(http://placekitten.com/300)'
  , 'url(http://placekitten.com/400)'
);

var current = 0;

function nextBackground() {
    current++;
    current = current % backgrounds.length;
    header.css('background-image', backgrounds[current]);
}
setInterval(nextBackground, 1000);

header.css('background-image', backgrounds[0]);

Les changements les plus importants (comme indiqué dans d'autres commentaires) sont que vous devez utiliser l'apostrophe ** '** s, et non ces funky guillemets simples à guillemets et que votre tableau n'est pas correct.

Avec ces corrections, j'ai simplifié quelques choses:

  1. Incrémenter currentalors prendre un module (je sais que c'est essentiellement ce que vous avez fait, mais combien est-il plus facile de déboguer ;)
  2. Cible background-image directement
  3. setInterval() utilisé au lieu d'un double appel à setTimeout 
17
gvee

Vous pouvez obtenir cette même technique avec HTML/CSS uniquement en 1. plaçant des images dans une balise "img" dans votre code HTML entourée d'un "div wrapper" et en la définissant sur position: relative et div wrapper img's sur position: absolute. Pour la largeur totale ou la hauteur totale, vous pouvez utiliser des pourcentages ou éventuellement "taille de l'arrière-plan: couverture" (non cochée), puis appeler une animation CSS pour modifier les images de manière dynamique. 

Ou 2. vous pouvez ajouter plusieurs images à un arrière-plan de votre CSS, séparées par des virgules, appliquer background-size: cover et utiliser à nouveau des animations CSS pour modifier l'arrière-plan. 

Voici un exemple et aussi Mozilla CSS3 Animation Documentation

4
truleighsyd

Vous ne pouvez pas délimiter les chaînes JavaScript avec des caractères ‘. Vous devez utiliser " ou '.

1
Quentin

Il doit être tard mais peut aider à un autre . Pour cet objectif, dans certaines situations, je préfère utiliser un plugin jquery nommé tcycle qui ne contient que quelques lignes de code et supporte seulement la transition en fondu, images.

Mettre en place un diaporama avec tcycle est simple et peut même être fait avec un balisage déclaratif tel que

<div class="tcycle">
<img src="p1.jpg">
<img src="p2.jpg">
</div>

Le truc pourrait être utilisé avec css z-index: -1 pour le conteneur div et la définition de la largeur et de la hauteur à 100%

La page d’accueil pour le téléchargement et la recherche d’autres exemples est Les plugins Malsup jQuery

0
Farid Silva Aboid