Question

通过更改示例代码开始学习PHP / Javascript，以显示来自多个文件夹的一组图片并在页面上显示内容（这是设计师的作品在旋转的大型4K显示器上显示）。到目前为止，我已经花了几天的时间来完成下面的工作（工作正常），但我一直在阅读，我认为这是我的基本知识，导致我在这一点上陷入困境。我无法弄清楚如何在每个（在jQuery中）显示图像，然后在脚本开始时返回到PHP，再次枚举图像文件夹。前进的方法是围绕整个PHP / JavaScript脚本创建一个循环吗？或者将它们定义为函数并将它们包含在执行循环的主脚本中（永远）？

我认为更多的是我不明白jQuery是如何永远循环的事实，我可以看到我增加，但不知道它是如何循环图像，而不是获取图像的数量和增量直到它击中最后一张图像。任何帮助或解释或示例都是有益的。

以下是代码：

<head>
<link rel="stylesheet" type="text/css" href="css.css">
<script src="jquery-1.11.2.min.js"></script>
</head>

<html>
<style type="text/css">
body {
overflow:hidden;
}
</style>
<body bgcolor="#000000">

<Div id="holder">
<img src="team_a/blank.jpg" id="slideshow" style="max-height: 100%; max-width: 100%" />
</Div>
</html>
<?php

// Header("content-type: application/x-javascript"); 

$team_a = array();
$team_1 = array();
$team_2 = array();
$team_3 = array();
foreach (new DirectoryIterator('team_a') as $fileInfo) {
if($fileInfo->isDot() || !$fileInfo->isFile()) continue;
$team_1[] = "team_a".'/'.$fileInfo->getFilename(); // Get file names of Team_A directory
}

foreach (new DirectoryIterator('team_b') as $fileInfo) {
if($fileInfo->isDot() || !$fileInfo->isFile()) continue;
$team_2[] = "team_b".'/'.$fileInfo->getFilename(); // Get file names of Team_B directory
}
foreach (new DirectoryIterator('team_c') as $fileInfo) {
if($fileInfo->isDot() || !$fileInfo->isFile()) continue;
$team_3[] = "team_c".'/'.$fileInfo->getFilename(); // Get file names of Team_C directory
}
$team_a = array_merge_recursive($team_1, $team_2, $team_3); //Merge all the arrays recursively into $team_a

print_r ($team_a); // A quick test of the contents of $team_a
?>
<script = "text/javascript">
var images = <?php echo json_encode($team_a) ?>;
setInterval(forwardImage, 10000);
//This function will find the key for the current Image
function currentImageKey() {
i = jQuery.inArray($('#slideshow').attr('src'), images);
return i;
}
//This function will move the slideshow forward one
function forwardImage() {
currentImageKey();
if (i < images.length - 1) {
    changeImage(i + 1);
} else {
    changeImage(0);
}
}
//This function will change to image to whatever the variable i passes to it
function changeImage(i) {
$('#slideshow').stop().animate({
    opacity: 0,
}, 1000, function() {
    $('#slideshow').attr('src', images[i]);
    $('#holder img').load(function() {
        $('#slideshow').stop().animate({
            opacity: 1,
        }, 1000)
    })
})
}
</script>

回到脚本开始 - 哪种方式最好？

0 个答案: