javascript - 制作一个简单的 slider

标签 javascript jquery html css

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

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

我有一个列表中的图像。

最佳答案

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

  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')).

关于javascript - 制作一个简单的 slider ,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/30828302/

相关文章:

javascript - 如何测试是否在 componentDidMount 中调用了方法?

javascript - 测试同构 javascript 应用程序

javascript - 如何在保留选定单元格的同时重新加载 Google Charts 日历中的数据?

javascript - Grunt 代码覆盖不起作用

php - jQuery IE。 ajax请求只运行一次

javascript - 如何删除这个 HTML?

c# - 使用给定的起点和终点从 html 中分离出一段数据

html - 带有文本的翻转图像上的 CSS 不透明度,但文本上的不透明度没有变化

javascript - :gt(0) vs :not(:first) vs . 切片(1)

javascript - 按钮同时有两个 Action