У меня проблемы с передачей массива PHP в Javascript
Я использую PHP и JavaScript для создания функции баннера. Все мои изображения находятся в папке Images / banner и динамически добавляются PHP, а затем добавляются в массив javaScript «adImages». Эта часть работает нормально, так как я могу видеть массив в JavaScript, когда я просматриваю. Тем не менее, изображения не размещаются на странице.
Вот мой код, что мне не хватает?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Rotating Banners</title>
<?php
$dir = 'Images/banner';
$files = scandir($dir);
array_shift($files);
array_shift($files);
?>
<script language="Javascript" type="text/javascript">
// Setting variables
dir = Images/banner/
adImages = <?php echo json_encode($files); ?>;
thisAd = 0
imgCt = adImages.length
// Rotate function
function rotate() {
if (document.images) {
thisAd++
if (thisAd == imgCt) {
thisAd = 0
}document.adBanner.src=dir+adImages[thisAd]
setTimeout("rotate()", 1 * 1000)
}
}
</script>
</head>
<body onload="rotate()">
<center>
<img src="" name="adBanner" alt="Ad Banner" />
</center>
</body>
</html>
Решение
Кажется, работает для меня после того, как сделать ваш dir var строка. Использование Chrome Developer Tools / Console указало на ошибки. Следующий код работает для меня с двумя примерами изображений:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Rotating Banners</title>
<?php
$dir = 'Images/banner';
$files = scandir($dir);
array_shift($files);
array_shift($files);
?>
<script language="Javascript" type="text/javascript">
// Setting variables
var dir = "Images/banner/",
adImages = <?php echo json_encode($files); ?>,
thisAd = 0,
imgCt = adImages.length;
// Rotate function
function rotate() {
if (document.images) {
thisAd++
if (thisAd == imgCt) {
thisAd = 0
}document.adBanner.src=dir+adImages[thisAd]
setTimeout("rotate()", 1 * 1000)
}
}
</script>
</head>
<body onload="rotate()">
<center>
<img src="" name="adBanner" alt="Ad Banner" />
</center>
</body>
</html>
Другие решения
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script src="jquery.js"></script>
<?php
$dir = '';
$files = array();
$dir = 'Images/banner';
$aExclusion = array( '..', '.' );
$files = array_diff(scandir($dir), $aExclusion);
$files = array_values( $files );
echo '<script>';
echo "var adImages = [];";
echo 'var oData = ' . json_encode( $files ) . ';';
echo '</script>';
?>
<script>
$(document).ready(function()
{
// Get banner count minus one for array offset.
iBannersSize = Object.keys(oData).length - 1;
// Ensure we have at least 1 banner to rotate.
if( iBannersSize > 0 )
{
window.setInterval(function(){
iChangeToImage = Math.round( Math.random() * ( iBannersSize - 0 ) );
$("div#banner_wrapper img").attr("src", 'Images/banner/' + oData[ iChangeToImage ] );
console.log( oData[ iChangeToImage ] );
}, 2000 );
}
});
</script>
</head>
<body>
<center>
<div id="banner_wrapper">
<!-- Render first banner on page load -->
<img src="<?php echo 'Images/banner/' . $files[ 0 ]; ?>" alt="Ad Banner">
</div>
</center>
</body>
</html>