Question

我试图在这里学习多种语言，但我似乎无法做到这一点。我搜索了很多网站，但没有找到任何例子来完成这项具体任务。

在我的网络服务器上，我有一个指向照片库的虚拟目录。我会定期将照片添加到此文件夹中。

我希望网页以随机顺序显示照片。此外，我不想专门列出代码中的照片。我已经用这个PHP代码以基本的方式使用它了：

<?php

$images = glob("*.jpg");

$imgs = '';

foreach($images as $image){ $imgs[] = "$image"; }

shuffle($imgs);

foreach ($imgs as $img) {
echo "<img src='$img' width=\"100%\" /> ";
}
?>

此代码以垂直方式一个接一个地显示文件夹中的所有图片。

我想要做的是重新制作，以便在您向下滚动时图像向上滑过上一张图像。

然后当图像到达窗口顶部时，它将具有静态位置，下一个图像将开始向上滑动。

我无法弄清楚这项技术是用php，jquery，css还是用什么来完成的？

我对所有这些语言都一无所知，但我试图抓住它！

非常感谢任何帮助。

Answer 1

我从另一个类似sample分发的answer：

<强> HTML

<body>
    <img id="one" src="http://lorempixel.com/400/400/sports" />
    <img id="two" src="http://lorempixel.com/400/400/animals" />
    <img id="three" src="http://lorempixel.com/400/400/food" />
    <img id="four" src="http://lorempixel.com/400/400/nature" />
</body>

<强> CSS

#one, #two, #three, #four {
    padding: 0px;
    margin: 0px;
    position:absolute;
}

#one   { top:0px; }
#two   { top:100%; }
#three { top:200%; }
#four  { top:300%; }

JS（使用jQuery）

(function(window){
$.fn.stopAtTop= function () {
    var $this = this,
        $window = $(window),
        thisPos = $this.offset().top,
        //thisPreservedTop = $this.css("top"),
        setPosition,
        under,
        over;

    under = function(){
        if ($window.scrollTop() < thisPos) {
            $this.css({
                position: 'absolute',
                top: ""
            });
            setPosition = over;
        }
    };

    over = function(){
        if (!($window.scrollTop() < thisPos)){
            $this.css({
                position: 'fixed',
                top: 0
            });
            setPosition = under;
        }
    };

    setPosition = over;

    $window.resize(function()
    {
        bumperPos = pos.offset().top;
        thisHeight = $this.outerHeight();
        setPosition();
    });

    $window.scroll(function(){setPosition();});
    setPosition();
};
})(window);

$('#one').stopAtTop();
$('#two').stopAtTop();
$('#three').stopAtTop();
$('#four').stopAtTop();

Answer 2

使用HTML构建（将图像放入div中）
使用CSS来设置它们的样式（在页面中间，填充n个东西）
使用javascript（jquery）添加＆＃34;动态＆＃34;，滚动上有一些链接（谷歌）并将此功能附加到窗口，现在这将允许您指定滚动时如何处理元素（选择你的div并隐藏[function] previous和slideup [function]下一个）

注意：只需谷歌功能，希望你从中学到一些好东西

无法获取HTML / PHP / JavaScript幻灯片代码工作

2 个答案: