duandao6414
duandao6414
2015-03-08 00:02

我在将PHP数组传递给Javascript时遇到问题[关闭]

已采纳

I'm using PHP and javascript to create a banner function. All of my images are in the folder Images/banners, and are being dynamically added by PHP, and then added to theJavaScript array "adImages". That part is working fine, as I can see the array in the JavaScript when I viewsouce. However, the images are not being placed on the page.

Here is my code, what am I missing?

<!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>
  • 点赞
  • 写回答
  • 关注问题
  • 收藏
  • 复制链接分享
  • 邀请回答

2条回答

  • doulaobi7988 doulaobi7988 6年前

    Seems to work for me after making your dir var a string. Using your Chrome Developer Tools / Console pointed the errors out for you. The following code works for me with two sample images:

    <!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>
    
    点赞 评论 复制链接分享
  • dongzongzhi6953 dongzongzhi6953 6年前
    <!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>
    
    点赞 评论 复制链接分享

为你推荐