javascript - 制作一个简单的 slider

Question

我如何制作一个包含多张照片的 slider ，您可以使用箭头在其中导航？

我已经在页面中有了图像和箭头。我是否应该隐藏所有图像并在单击箭头时隐藏当前图像并显示下一张/上一张？

我有一个列表中的图像。

Answer 1

我认为你应该去做。自己制作，这是了解事物运作方式的最佳方式。这是带箭头的简单显示/隐藏框的指南:

1. 使用 css 隐藏所有图像。
2. 仅显示类别为 current 的图像。
3. 使用 jQuery on load 函数将 current 类添加到第一个元素(您也可以在这里处理预加载或其他东西)
4. 单击箭头将当前图像分配给变量，如 var current = $('.imgClass.current')，从所有图像中删除 current 类( $('.imgClass').removeClass('current'))，并将其添加到 current.next() 或 .prev() 中。如果 next() 或 prev() 未定义，将其添加到元素编号 0 或 $('.imgClass')。 length - 1 对应于 ($('.imgClass').eq(n).addClass('current')).