PHP生成的JS照片滑块?

时间:2014-01-22 00:31:40

标签: javascript php

我想知道是否有人可以提供帮助。我无法发现它为什么不起作用。我对JS并不陌生,但逻辑就在我脑海里。我只是在拉动指定文件夹的图像内容(或者不应在URL中指定默认文件夹)并将它们按顺序显示在img中。

<img src="./img/samples/sample1.jpg"  class="gallery_image" name="slideshow_image">

<?php

if($_GET["med"])
{
    $files = glob('./img/samples/' . $_GET["med"] . '/*.{jpg}', GLOB_BRACE);
}
else
{
    $files = glob('./img/samples/*.{jpg}', GLOB_BRACE);
}
echo    '<script type="text/javascript">';
$n = 1;
foreach($files as $file)
{
    echo    'var image' . $n . ' = new Image();'
        ,   'image' . $n . '.src = "' . $file . '";';
    $n++;
}
echo    'var step = 1;'
    ,   'function slideit()'
    ,   '{'
    ,   '   document.images.slideshow_image.src = eval("image"+step+".src");'
    ,   '   if(step < ' . $n . ')'
    ,   '       step++;'
    ,   '   else'
    ,   '       step = 1;'
    ,   '   setTimeout("slideit()",2500);'
    ,   '}'
    ,   'slideit();';
?>

非常感谢任何帮助。

1 个答案:

答案 0 :(得分:0)

您正在以最糟糕的方式混合使用HTML,PHP和JavaScript。

当然,你可以做这项工作,但它会花费你很多努力,并试图让它发展将是一个残酷的痛苦。

您应该为每种3种语言定义一个清晰的界面,而不是在与HTML代码交织在一起的PHP脚本中半生成JavaScript代码。

PHP必须做的是找到要显示的图像列表 JavaScript的工作是为幻灯片放映动画。
HTML用于显示图像。

这是一个可能的解决方案:

<?php
// returns a javascript array initializer
function slideshow_files ($dir)
{
    $dir = $dir ? "/".$dir : "";
    $files = glob('./img/samples' . $dir . '/*.{jpg}', GLOB_BRACE);
    return "[".implode (',', $files)."]";
}
?>
<head>
<script>
// an anonymous function to avoid polluting global context
(function () {

    // get your image list from PHP
    var imgs = <?= slideshow_files ($_GET["med"]); ?>;

    // preload images
    var image = [];
    for (var i = 0 ; i != slide_image.length ; i++)
    {
        image[i] = new Image;
        image[i].src = img[i];
    }

    // launch your slideshow
    var step = 0;
    slide();

    // slideshow timer proc
    function slide()
    {
       document.images.slideshow_image.src = image[step].src;
       step = (step+1) % image.length;
       setTimeout(slide, 2500);
    }
})();
</script>
</head>
<body>
<img src="./img/samples/sample1.jpg"  class="gallery_image" name="slideshow_image">
</body>

毋庸置疑,如果您继续将所有代码转储到大型HTML文件中,您将无法编写任何中等复杂的内容。