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

Can't Get HTML/PHP/JavaScript Slideshow Code Working

本文关键字：常工作 工作 代码 幻灯片 HTML PHP JavaScript      更新时间：2023-09-26

我正在尝试在这里学习多种语言，但我似乎无法做到这一点。我搜索了许多网站，但没有找到任何示例来完成此特定任务。

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

我希望网页以随机顺序显示照片。另外，我不想在代码中专门列出照片。我已经用这个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 完成的还是什么？

我对所有这些语言都太无知了，但我正在努力掌握它的窍门！

任何帮助将不胜感激。

我从另一个类似的答案中分叉出来的一个示例：

.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();
  • 使用 HTML 来构建(将图像放在div 中(
  • 使用CSS设置它们的样式(在页面中间，填充n个东西(
  • 使用JavaScript(jquery(添加"dynamics"，滚动上有一些链接(到谷歌(并将此功能附加到窗口，现在这将允许您指定滚动时如何处理元素(选择您的div 并隐藏[功能]上一个和 slideup[功能] 下一个(

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

相关文章：