Question

我试图建立一个从文件中读取图像然后从该图像中更改背景的网站。

要做到这一点，我想使用一个名为bgswitcher的jQuery：
https://github.com/rewish/jquery-bgswitcher
http://rewish.github.io/jquery-bgswitcher/

但它不能正常工作，这是我第一次使用jQuery，所以我当然会做一些愚蠢的错误。这是我的代码：

<?php
    $dir = "img/";
    $numFiles = 0;
    $fh = fopen('config.txt','r');
    $imgTime = fgets($fh);
    $transTime = fgets($fh);

    if (is_dir($dir)){
        if ($dh = opendir($dir)){
            $file = readdir($dh);$file = readdir($dh); //Para deshacerme del . i ..
            while (($file = readdir($dh)) !== false){
                $files[] = $file;
                $numFiles++;
            }
            closedir($dh);
        }
    }
?>

<!doctype html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Gestor Publicitari v0.2</title>
        <style type="text/css">
            body{
                background-color:white;
            }       
        </style>
        <script type="text/javascript" src="jquery-1.11.1.js"></script>
        <script language="javascript">
            var images = <?php echo json_encode($files); ?>;
            var numImg = <?php echo json_encode($numFiles); ?>;
            var imgTime = parseInt(<?php echo json_encode($imgTime); ?>)*1000;

            $('.box').bgswitcher({
                images: ["img/1.jpg","img/2.jpg","img/3.jpg","img/4.jpg","img/5.jpg"],
                effect: "fade",
                interval: 500;
            });
        </script>    
    </head>
    <body>
        <div class="box">
            <p>TEST</p>
        </div>
    </body>
</html>

要丢弃错误，我没有使用readed文件，我使用的是5个示例图片。

Answer 1

首先，作为@Arun建议，您需要添加bgswitcher插件。

<script type="text/javascript" src="jquery-1.11.1.js"></script>
<script type="text/javascript" src="jquery-bgSwitcher.js"></script>

之后，由于您将<script>放入<head>部分，因此您需要将代码包装在 DOM ready 处理程序{{1}内}或更短的形式$(document).ready(function(){...})以确保在执行jQuery代码之前正确加载了DOM元素

$(function(){...});

Answer 2

将代码放在jquery ready函数

中

$(function(){
   // your code
});

第一次使用jQuery，它不起作用

2 个答案: