Question

我正在尝试使用香草javascript向HTML页面添加无限滚动功能，但我似乎无法弄清楚该如何做。我只写了几行html代码。在这里：

<!DOCTYPE html>
<html>
<head>
<title>Infinite Scroll</title>
</head>
<body>
    <img src="image1.jpg" alt="">
    <img src="image2.jpg" alt="">
    <img src="image3.jpg" alt="">
    <img src="image4.jpg" alt="">
    <img src="image5.jpg" alt="">
</body>
</html>

我还没有写CSS，因为我现在只想关注javascript。滚动应类似于自举轮播。请帮助我。

Answer 1

轮播和无限滚动不是同一回事。但是在创建复杂的东西之前，您应该接受学习创建简单的东西。

一个好主意可能是专注于一些基本步骤

只有两个图片
用CSS隐藏第二个
添加一个“下一步”按钮，什么都不做
了解如何在单击按钮时进行console.log
更改按钮代码以隐藏第一个图像并显示第二个图像
找到一种循环的方式，如果在显示第二个时再次按下则显示第一个
添加第三张图片以测试循环
添加“上一个”按钮
确保您的代码可处理可变数量的图像

所以，您刚刚创建了一个轮播

带有香草JavaScript的无限滚动

1 个答案: