gpt4 book ai didi

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

转载 作者:太空宇宙 更新时间:2023-11-04 12:33:24 25 4
gpt4 key购买 nike

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

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

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

我对所有这些语言都一无所知,但我正在努力掌握它!

非常感谢任何帮助。

最佳答案

A sample我从另一个类似的 answer fork 出来的:

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();

关于javascript - 无法使 HTML/PHP/JavaScript 幻灯片代码正常工作,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/27464947/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com