无法获取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. 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

$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?

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

• use HTML to structure ( put images in divs )
• use CSS to style them ( in the middle of the page, padding n stuff)
• 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 )

Note: just google the functions, hope you learn something good from it