0

画像が変更されるたびに画像と背景色を変更する次のコードがあります。

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

それで、それがそのように混乱するために私は何をすることができますか?

4

2 に答える 2

1

background-image:url("#");-->では引用符を省略できますbackground-image:url(#);

background-color:"#fff";--> background-color: #fff;- ここでは引用符は不要です。

引用符で囲まれたタグ内のすべてのスタイル プロパティ。属性style=""内styleで同じ引用符を使用することはできません。代わりに( )""を使用する必要があります。したがって、単一の引用符も使用してください。内部の引用符はエスケープする必要があります: .''style="background-image: url('#');"echostylestyle="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-05T23:27:28.747 に答える
0

を出力するスタイル属性に二重引用符があります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 文字列内で使用しているため)。

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-05T23:20:53.723 に答える