javascript - Javascript 滑动图片库 - 没有 jQuery

Question

有没有人有关于制作纯 JS 图像滑块的任何提示？我希望在每张图片后暂停并在浏览完所有图片后重新启动。我能找到的只有 jQuery 插件，我希望只用 JS 来做这件事。

Answer 1

我会去做这样的事情：

var sliderTool = {
    _totalItems : 0,
    _visibleItems : 6,
    _currentOffset : 0,
    _timeout : null,
    next : function(){
        ...
    },
    prev : function(){
        ...
    },
    play : function(){
        ...
    },
    pause : function(){
        ...
    }
};

作为基础。

每次设置超时时，将其保存到 _timeout 字段中，以便您可以随时清除Timeout(sliderTool._timeout)。next 和 prev 可以包含动画或只是简单的图像替换。您可以为动画和幻灯片之间的间隔添加单独的超时。

您可以向滑块工具添加“add()”方法，然后在 window.load 或“body onload”上添加所有图像，然后运行 ​​start() 方法。您还可以在页面加载后动态添加图像

也许还添加 init() 用于自动加载和基本设置。

同样，这是可能解决方案的基本草案。一旦你开始跑步，你可能会遇到更具体的问题。总的来说，作为一种方法，我建议在寻求一般建议之前先尝试提出一些解决方案；）