jQuery的PHP更换CSS

嘿所有我有以下代码改变了图像和背景颜色每当图像变化：jQuery的PHP更换CSS

$buildGrx = ''; 

if ($cssColor1 <> '') {$buildGrx = '\'uploadImage/bannerImg/slider/1.jpg\','; } 
if ($cssColor2 <> '') {$buildGrx .= '\'uploadImage/bannerImg/slider/2.jpg\','; } 
if ($cssColor3 <> '') {$buildGrx .= '\'uploadImage/bannerImg/slider/3.jpg\','; } 
if ($cssColor4 <> '') {$buildGrx .= '\'uploadImage/bannerImg/slider/4.jpg\','; } 
if ($cssColor5 <> '') {$buildGrx .= '\'uploadImage/bannerImg/slider/5.jpg\','; } 
if ($cssColor6 <> '') {$buildGrx .= '\'uploadImage/bannerImg/slider/6.jpg\','; } 
if ($cssColor7 <> '') {$buildGrx .= '\'uploadImage/bannerImg/slider/7.jpg\','; } 
if ($cssColor8 <> '') {$buildGrx .= '\'uploadImage/bannerImg/slider/8.jpg\','; } 
if ($cssColor9 <> '') {$buildGrx .= '\'uploadImage/bannerImg/slider/9.jpg\','; } 
if ($cssColor10 <> '') {$buildGrx .= '\'uploadImage/bannerImg/slider/10.jpg\','; } 

$buildGrx = substr($buildGrx, 0, strlen($buildGrx) - 1); 

var imgArr = new Array(// relative paths of images 
<?PHP echo $buildGrx ?> 
); 

var preloadArr = new Array(); 
var i; 
var colorsCSS = new Array(); 

colorsCSS[0] = '#fff'; 
colorsCSS[1] = '<?PHP echo $cssColor1 ?>'; 
colorsCSS[2] = '<?PHP echo $cssColor2 ?>'; 
colorsCSS[3] = '<?PHP echo $cssColor3 ?>'; 
colorsCSS[4] = '<?PHP echo $cssColor4 ?>'; 
colorsCSS[5] = '<?PHP echo $cssColor5 ?>'; 
colorsCSS[6] = '<?PHP echo $cssColor6 ?>'; 
colorsCSS[7] = '<?PHP echo $cssColor7 ?>'; 
colorsCSS[8] = '<?PHP echo $cssColor8 ?>'; 
colorsCSS[9] = '<?PHP echo $cssColor9 ?>'; 
colorsCSS[10] = '<?PHP echo $cssColor10 ?>'; 

/* preload images */ 
for(i=0; i < imgArr.length; i++){ 
    preloadArr[i] = new Image(); 
    preloadArr[i].src = imgArr[i]; 
} 

var currImg = 1; 
var intID = setInterval(changeImg, 6000); 

/* image rotator */ 
function changeImg(){ 
    alert(currImg); 
    $('#pageBG').animate({opacity: 0}, 1000, function(){ 
    $(this).css('background-image','url(' + preloadArr[currImg++%preloadArr.length].src +')'); 
    $(this).css('background-color', colorsCSS[currImg]); 
}).animate({opacity: 1}, 1000); 
}

，它改变了HTML代码：

echo '<div align="center" style="background-image:url("#"); background-color:"#fff"; background-repeat:no-repeat; background-position:center top; height:287px;" id="pageBG"></div>';

然而，问题是，由于某种原因，螺丝了html代码：

<div align="center" id="pageBG" height:287px;"="" top;="" background-position:center="" background-repeat:no-repeat;="" background-color:"#fff";="" #");="" style="opacity: 1; background-image: url(&quot;http://www.thehamiltonfirm.com/hf-blog/uploadImage/bannerImg/slider/2.jpg&quot;);"></div>

所以我能怎么做我n阶它混杂这样？

来源

2012-10-05 StealthRT

可以在background-image:url("#");省略引号引号是不必要在这里。

在标签的所有样式属性的报价style=""包裹，里面style属性不允许使用相同的报价，而不是""必要使用''（style="background-image: url('#');"）。所以，echo采用单qoutes过，里面style引号必须转义：style="background-image: url(\'#\');"。

<?php 
    echo '<div align="center" 
       style="background-image: url(\'#\'); 
       background-color: #fff; 
       background-repeat: no-repeat; 
       background-position: center top; 
       height: 287px;" id="pageBG"> 
      </div>';

来源

2012-10-05 23:27:28 doktorgradus

这帮助了，但仍有似乎是没有第一张幻灯片后，再填充背景色的问题。 – StealthRT

你在PHP或JS文件的代码中找到？ – doktorgradus

你必须在样式属性双引号，你输出的div。

echo '<div align="center" style="background-image:url("#"); background-color:"#fff"; background-repeat:no-repeat; background-position:center top; height:287px;" id="pageBG"></div>';

相反，您应该使用转义的单引号（因为您在单引号分隔的PHP字符串中使用它）。 >background-image:url(#);

background-color:"#fff"; - - >background-color: #fff; -

echo '<div align="center" style="background-image:url(\'#\'); background-color:\'#fff\'; background-repeat:no-repeat; background-position:center top; height:287px;" id="pageBG"></div>';

来源

2012-10-05 23:20:53 smdrager

这有帮助，但似乎仍然存在一个问题，在第一张幻灯片后背景颜色不再被填充。 – StealthRT

jQuery的PHP更换CSS

回答

相关问题