0

我正在使用 PHP 和 javascript 创建横幅功能。我所有的图片都在 Images/banners 文件夹中，由 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>
4

2 回答 2

1

dir使您的var 成为字符串后，似乎对我有用。使用您的 Chrome 开发者工具/控制台为您指出错误。以下代码适用于我的两个示例图像：

<!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>
于 2015-03-08T00:11:45.857 回答
0 
<!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>
于 2015-03-08T00:49:43.950 回答