JavaScript, Wie ändern Sie den hintergrund eines div-tag, alle x Sekunden

Ich versuche, um einige JavaScript-code, um den hintergrund zu ändern von zwei div-tags, alle X Sekunden. Hier ist mein code:

HTML

<div id="bg_left"></div>
<div id="bg_right"></div>

CSS
body{
height:100%;
}

#bg_left{
   height:100%;
   width:50%;
   left:0;
   position:fixed;
   background-position:left;
}
#bg_right{
    height:100%;
    width:50%;
    right:0;
    position:fixed;
    background-image:url(http://presotto.daterrawebdev.com/d/img/pp_hey_you_bg.png);
    background-position:right;
}

JAVA SCRIPT

 function carousel_bg(id) {
     var bgimgs = [  'pp_hey_you_bg.png', 'burningman_bg.png' ]; 
     var img1 = bgimgs[id];
     var img2 = bgimgs[id+1];
     var cnt = 2; 

     $('#bg_left').css("background-image", "url(http://presotto.daterrawebdev.com/d/img/"+img1+")");
     $('#bg_right').css("background-image", "url(http://presotto.daterrawebdev.com/d/img/"+img2+")");

     id = id + 1;
     if (id==cnt) id = 0;

     setTimeout("carousel_bg("+id+")", 10000); 
 }

 $(document).ready(function() {
        carousel_bg(0);     
 });

Hintergrund-Bilder sollten verändert werden, zufällig, aber Sie nicht selbst ändern.

Welche änderungen hast du Sie einfach machen? Bitte angeben, wenn andere, aktiv zu versuchen, daran zu arbeiten.
Sorry. Ich habe die var img für img1 und fügte hinzu, eine weitere variable benannt und es img2. Ich habe auch die $(body).css("backgrou... zu $('#bg_left').css (""..und dazu noch eine Aktion für die #bg_right.
Bitte nicht "bump" Ihre Frage, indem "UNGELÖST:" um den Titel. Ungelöste Fragen sind bereits visuell angezeigt.
ok.. kein problem. Es bekam.
So... nur versuchen zu verstehen, was hier passiert. Alles, was getan werden muss, bevor wir zu reden über das Thema mit dem code? Ich bin nicht sehr vertraut mit StackOverflow-Regeln, aber ich bin ok mit Ihnen.
Es sieht aus wie Ihre Geige jetzt funktioniert... wenn ja, möchten Sie vielleicht annehmen, eine Antwort zu schließen, diese Frage (und verbessern Sie Ihre Akzeptanz-Bewertung).

InformationsquelleAutor Vinicius Santana | 2012-12-12

5

OK, ich sehe das Problem in deinem jsFiddle. Denn du bist die übergabe eines string zu setTimeout() string ausgewertet wird nur auf der obersten Ebene Rahmen. Aber, den Namen der Funktion, die Sie passierten, ist nicht auf der obersten Ebene Umfang (es ist in einer onload-Prozedur für das jsFiddle). Also, ich änderte die Art und Weise Ihre JS positioniert ist in der jsFiddle so ist es nun an der top-level-Bereich. Ich habe auch Feste die Logik für die Auswahl eines Bildes und arbeitet jetzt hier: http://jsfiddle.net/jfriend00/awVYP/

Und hier ist eine gereinigte version, die nicht übergeben Sie eine Zeichenfolge an setTimeout() (ein viel besserer Weg, um javascript schreiben) vergeht eine lokale Funktion und ist mit einem Verschluss versehen, um zu verfolgen den aktuellen index: http://jsfiddle.net/jfriend00/LVGNN/
```
    function carousel_bg(id) {
        var bgimgs = [  'pp_hey_you_bg.png', 'burningman_bg.png' ]; //add images here..

        function next() {
            if (id >= bgimgs.length) {
                id = 0;
            }
            var img1 = bgimgs[id];
            id++;
            if (id >= bgimgs.length){
                id = 0;
            }
            var img2 = bgimgs[id];

            $('#bg_left').css("background-image", "url(http://presotto.daterrawebdev.com/d/img/"+img1+")");
            $('#bg_right').css("background-image", "url(http://presotto.daterrawebdev.com/d/img/"+img2+")");
            setTimeout(next, 1000);
        }
        next();
    }

    $(document).ready(function() {
            carousel_bg(0);     
    });
```
Letzten Kommentare zu früheren Versionen, so dass der OP-code:
```
$('#body')
```
werden sollte:
```
$('body')
```
oder noch schneller:
```
$(document.body)
```
Auch, Ihre jsFiddle zeigt eine etwas seltsame Frage. Dein CSS ein hintergrund-Bild auf der HTML-tag, sondern Ihr javascript setzt einen semi-transparenten hintergrund Bild auf dem body-tag. Ist das wirklich das, was Sie wollen?
- ops.. das ist ein Fehler... ich werde das nun ändern.. den #Körper #bg_left.. vielen Dank für bemerken.
- Das ist nicht das problem, wenn.. ich versuche zu ändern, die Hintergründe in den divs #div_right und #div_left
- Was ist heute mit mir... :p ich meinte. die divs #bg_right und #bg_left
- Und ja.. die HTML hat einen hintergrund.. es hat nichts mit dem problem zu tun.. ist nur, dass ich aufgeräumt, was hatte ich von dem Projekt, aber ja. Die divs, dass ich versuche, den hintergrund ändern, haben Transparenz und sind an der Spitze der html-jeder hat es im Besitz hintergrund. Ich würde es sauber, aber anscheinend sind die Leute wütend, wenn Sie eine änderung auf die Frage.
- OK, ich glaube, ich habe es behoben bis jetzt für Sie. Sehen, was ich Hinzugefügt habe, der Anfang meiner Antwort. Ich habe auch das timing, nur um es schneller zu Debuggen.
- Ja, Mann. Danke. Tolle Arbeit.
InformationsquelleAutor jfriend00
1

Zum testen Hinzugefügt habe ich ein anderes Bild auf das array, so dass wir ein Unterschied in der Sortierung.
```
function carousel_bg(id) {
    var bgimgs = [  'http://presotto.daterrawebdev.com/d/img/pp_hey_you_bg.png', 'http://presotto.daterrawebdev.com/d/img/burningman_bg.png', 'http://gallery.orobouros.net/var/albums/2012/NewYorkComicCon2012/Legend-of-Korra/nycc_20121013_164625_0041.jpg?m=1354760251' ]; //add images here..
    var img1 = bgimgs[id+1];
    var img2 = bgimgs[id];
    var cnt = bgimgs.length; //change this number when adding images..

    $('#bg_left').css("background-image", "url("+img1+")");
    $('#bg_right').css("background-image", "url("+img2+")");

    id = id + 1;
    if (id== (cnt - 1) ) id = 0;

    setTimeout("carousel_bg("+id+")", 10000);
}
```
Zwei änderungen hier:
1. Für Ihre Anzahl der Bilder, ich bin das abrufen der Gesamtanzahl der Bilder in das array dynamisch statt von hand (bgimgs.Länge)
2. In Ihrem bedingten nach zurücksetzen der id-Wert, subtrahieren Sie die Gesamtzahl von 1. Da JS hat null-basierten Indizes, dies nicht zu tun, erhalten Sie eine "undefined" - Fehler (eine 3-Element-array spuckte einen Wert von 4 in deinem original-code auf der letzten iteration).
Während dieser code ist in einer Schleife durch das array, es ist nicht zufällig. Das ist ein anderes Thema.
- Verwenden Sie die Länge statt der änderung der Anzahl der job mit der zweiten Korrektur, die Sie Hinzugefügt, cnt -1. Dank für, die. Aber die Schleife noch nicht ausgeführt. Überprüfen Sie den link unten. jsfiddle.net/vinicius5581/B9aQg/8
InformationsquelleAutor Angry Spartan
1

Für diejenigen, die nicht mit JQuery, tun Sie einfach Folgendes:
```
document.body.style.backgroundImage="url(images/mybackgroundimage.jpg)";
```
InformationsquelleAutor oabarca

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.