无法使HTML / PHP / JavaScript幻灯片代码正常工作

Question

I'm trying to learn multiple languages here and I can't seem to get this right. 我正在尝试在这里学习多种语言，但似乎无法正确地做到这一点。 I've searched many sites but haven't found any examples to accomplish this specific task. 我搜索了许多站点，但未找到任何示例来完成此特定任务。

On my web server I have a virtual directory that points to a photo repository. 在我的Web服务器上，我有一个指向照片存储库的虚拟目录。 I add photos to this folder regularly. 我会定期将照片添加到此文件夹。

I want the webpage to show the photos in a random order. 我希望网页以随机顺序显示照片。 Also, I don't want to specifically list the photos in the code. 另外，我不想在代码中专门列出照片。 I've gotten it working in a basic way with this php code: 我已经用这个php代码以一种基本的方式工作了：

<?php

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

$imgs = '';

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

shuffle($imgs);

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

This code shows all of the pictures in a folder at full width one after another vertically. 此代码以全角垂直显示文件夹中的所有图片。

What I'd like to do is remake this so that the images slide upward over the previous image while you scroll down. 我想做的就是重新制作此图像，以便在向下滚动时，图像在上一个图像上方向上滑动。

Then when the image reaches the top of the window it would have a static position and the next image would begin sliding up on top of it. 然后，当图像到达窗口顶部时，它将处于静态位置，下一幅图像将开始在其顶部滑动。

I can't figure out if this technique is done with php, jquery, css or what? 我不知道这种技术是用php，jquery，css还是什么完成的？

I'm too ignorant to all of these languages but I'm trying to get the hang of it! 我对所有这些语言都不了解，但我正努力掌握它！

Any help is greatly appreciated. 任何帮助是极大的赞赏。

Answer 1

A sample that I forked from another similar answer : 我从另一个类似的答案中得到的示例：

HTML 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 CSS

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

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

JS (using jQuery) 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

use HTML to structure ( put images in divs ) 使用HTML进行结构化（将图像放入div中）
use CSS to style them ( in the middle of the page, padding n stuff) 使用CSS设置样式（在页面中间，填充n个内容）
use javascript(jquery) to add "dynamics", there is something link on scroll (to google) and attach this function to the window, now this will allow you to specify what to do with the elements when scrolling ( select your divs and either hide[function] previous and slideup[function] the next ) 使用javascript（jquery）添加“动力学”，在滚动上有一些链接（到google）并将此函数附加到窗口，现在，这将允许您指定滚动时要处理的元素（选择div， hide [function]上一个和slideup [function]下一个）

Note: just google the functions, hope you learn something good from it 注意：只是谷歌的功能，希望你从中学到的东西

无法使HTML / PHP / JavaScript幻灯片代码正常工作

问题描述

2 个解决方案

解决方案1
1 2014-12-14 00:40:01

解决方案2
0 2014-12-14 00:09:29

无法使HTML / PHP / JavaScript幻灯片代码正常工作

问题描述

2 个解决方案

解决方案1 1 2014-12-14 00:40:01

解决方案2 0 2014-12-14 00:09:29

解决方案1
1 2014-12-14 00:40:01

解决方案2
0 2014-12-14 00:09:29