Dynamicly Changement de CSS Image d'arrière-plan

J'ai essayé un couple de choses déjà, mais jusqu'à présent aucune chance.

Ce que je cherche est un moyen de rendre mon code HTML balise d'en-tête changer les images de fond toutes les quelques secondes. Toutes les solutions sont les bienvenus, tant qu'il n'est pas complexe.

J'ai ce code dès maintenant ainsi que la liaison à 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 code 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%;
}

Droit maintenant, j'ai maintenant l'image d'arrière-plan.

Hâte de suggestions.

Votre tableau est faux... il y a quelques virgules manquantes..
citer les chaînes de caractères sont mal trop. jsfiddle.net/4LFnK

OriginalL'auteur CW Design | 2014-02-13

<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>

Merci pour le copier-coller de mon code ;-)
Merci les gars je l'ai eu à travailler maintenant, merci à tous pour votre aide. Une chose de plus. Puis-je obtenir ceci: var header = $('header'); pour appeler un class au lieu de l'élément. Je veux demander à mon HTML5 <header class="mainheader">?
Compris la class chose, tout semble fonctionner parfaitement merci encore à tous pour votre aide, vraiment l'apprécier.
pouvez-vous s'il vous plaît changer la accepté de répondre depuis ce gars semble avoir copié/collé le anwswer de l'utilisateur ci-dessous?
Comment puis-je me permettre une transition en douceur lorsque l'arrière-plan des changements?

OriginalL'auteur sopanha

15

Fait quelques modifications à votre code

DÉMO: 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]);
```
Changements les plus importants (comme indiqué dans d'autres commentaires), c'est que vous devez utiliser l'apostrophe**'**s, et non pas ceux funky ouvrir et de fermer les guillemets simples et que votre tableau n'était pas correct.

Avec ces corrections de la route, j'ai simplifié les choses:
1. Incrément current puis prendre le module (je sais que c'est fondamentalement ce que vous avez fait, mais combien est plus facile que de débogage ;))
2. Cible background-image directement
3. Utilisé setInterval() au lieu d'un double appel à setTimeout
Merci pour votre aide pour l'instant, mais rien n'est encore. J'ai copié et collé votre code dans ma page à l'intérieur de mon script balises. Aussi tageted background-image comme vous l'avez dit. Encore je n'ai pas d'image du tout, il ne fait aucun sens.
pouvez-vous essayer avec le PlaceKitten liens?
Oui je l'ai fait, comme vous l'aviez.
toute erreur dans la console? Pouvez-vous nous donner un lien?
[klassewoodsnaturalfarm.com/KWNF/klassewoods.php]

OriginalL'auteur gvee
4

Vous pourriez réaliser cette même technique avec le HTML/CSS Uniquement par 1. placer des images à l'intérieur d'un "img" balise HTML entouré par un "div wrapper" et la valeur de position:relative et div wrapper img du position:absolute. Pour le plein-largeur/pleine hauteur, vous pouvez utiliser des pourcentages ou potentiellement "background-size:cover" (n'ai pas vérifié) et ensuite appeler une les animations CSS pour changer les images de façon dynamique.

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

Voici un exemple et aussi Mozilla CSS3 Animation de la Documentation

OriginalL'auteur truleighsyd
1

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

Microsoft Word est le meilleur éditeur de code! 😛
J'espère que vous vous moquez.
Bien sûr, je suis 😛 Il est rare de voir ce genre de citations n'importe où en dehors de la Parole, dans mon expérience.

OriginalL'auteur Quentin
0

Il doit être en retard, mais il peut aider à un autre.
Pour atteindre cet objectif, dans certaines situations, je préfère utiliser un plugin jquery nommé tcycle qui n'ont que quelques lignes de code et prend en charge seulement de fondu de transition, mais cela fonctionne sans problème même avec de grandes images.

Configurez un diaporama avec tcycle est facile et peut être fait avec les déclaratif de balisage tels que
```
<div class="tcycle">
<img src="p1.jpg">
<img src="p2.jpg">
</div>
```
Le truc pourrait être donde à l'aide de css z-index:-1 pour la div conteneur et le réglage de la largeur et de la hauteur à 100%

Page d'accueil de téléchargement et de vérifier pour d'autres exemples, c'est Malsup plugins jQuery

C'est une idée terrible. Il serait de charger toutes les images de la première.

OriginalL'auteur Farid Silva Aboid

Vous devez vous connecter pour publier un commentaire.