Das css 'background-image' mit Jquery kann nicht geändert werden

Question

Ich versuche, durch ein Array von Bildern zu fahren, um einen Foto-Viewer auf meiner Webseite zu machen. Die Zyklusmethode funktioniert gut, aber die Übertragung der Nachricht an die CSS ist nicht möglich. Ich frage mich, ob es Syntaxprobleme in meinem JavaScript-Code oder ein Konzept gibt, das ich verpasse. Ich weiß, dass das Radfahren funktioniert, weil der Alarm, den ich habe, funktioniert.

var changeIt = "" 
var backgroundPic = new Array(4); 

backgroundPic[0] = '("images/displayPic1.jpg")'; 
backgroundPic[1] = '("images/displayPic2.jpg")'; 
backgroundPic[2] = '("images/displayPic3.jpg")'; 
backgroundPic[3] = '("images/displayPic4.jpg")'; 
backgroundPic[4] = '("images/displayPic5.jpg")'; 

var picCounter = 0; 
var numberOfPics = 5; 
var picTimer; 

function setPic(){ 
    alert("hi I want this pic: " + backgroundPic[picCounter]); 
    $('slider').css('background-image', url + "backgroundPic[picCounter]"); 

    picCounter += 1; 
     if(picCounter >= numberOfPics){ 
     picCounter = 0; 
    } 

} 

$(document).ready(function(){ 

    $('.slider').css('background-image', backgroundPic[picCounter]); 

    picTimer = setInterval(setPic, 2000); 

}); 

Answer 1

Das Problem ist auf die falsche Syntax verwenden Sie, wenn Sie die CSS-Eigenschaft Wert verketten. Versuchen Sie folgendes:

var backgroundPic = [ 'images/displayPic1.jpg', 'images/displayPic2.jpg', 'images/displayPic3.jpg', 'images/displayPic4.jpg', 'images/displayPic5.jpg' ];  
var picCounter = 0; 
var picTimer; 

function setPic() { 
    // note the . in the jquery object below to indicate a class selector 
    $('.slider').css('background-image', 'url("' + backgroundPic[picCounter % backgroundPic.length] + '")'); 
    picCounter++; 
} 

$(document).ready(function() { 
    picTimer = setInterval(setPic, 2000); 
    setPic(); 
}); 

Answer 2

Sie haben wie das Hintergrundbild zu setzen:

$('.slider').css('background-image', "url('" + backgroundPic[picCounter] + "')"); 

Answer 3

Sie invertiert, um die Positionierung der quotemarks in der zweiten Zeile von setPic.

Versuchen: $('slider').css('background-image', 'url' + backgroundPic[picCounter]);

Answer 4

Auf Ihrer setPic Funktion, diese Linie

$('slider').css('background-image', url + "backgroundPic[picCounter]"); 

nicht einen Punkt auf $('.slider') fehlt?

Answer 5

Sie benötigen, um doppelte Anführungszeichen (") vor und nach dem imageUrl wie folgt umfassen:.

$('slider').css('background-image', 'url("' + backgroundPic[picCounter] + '")'); 

diese Weise, wenn die Bildräume hat es wird immer noch als Eigenschaft gesetzt werden