制作一个简单的滑块

Question

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

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

我有一个列表中的图像。

Answer 1

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

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

Answer 2

(function() {
var t = document.getElementById("sd"),
    e = document.createElement("img"),
    n = ["2", "3", "4"],
    d = 0;
t.appendChild(e), setInterval(function() {
    e.setAttribute("src", n[d]), e.style.height = "200px", e.style.width = "470px", d++, d >= n.length && (d = 0)
}, 1800)
})();

这是一个简单的纯 js 滑块，只需在您的 html 页面中的任何位置按 id (sd) 创建一个 div，以添加您的图像 src 更改 n = ["2", "3", "4"]，加上你的图片路径 喜欢 n = ["images/car.jpg", "3.jpg", "4.png"], 你也可以添加更多图像，你可以改变图像的宽度和高度 e.style.height = "200px", e.style.width = "470px"

………… 现在如何制作滑块 我们有多个图像，可以说它是 5，并且所有图像 src（路径）都在一个数组上 现在滑块显示一个图像它的第一个和显示第二个 它通过数组上的第二个 src 更改图像的 src，如果它在最后一个数组项（数组上的最后一个图像）上它返回到第一项（图像 src），你可以看到上面的代码:)