jQuery图像滑块一一答案

【问题标题】：JQuery image slider one by onejQuery图像滑块一一
【发布时间】：2015-07-08 05:43:57
【问题描述】：

我有这些照片

<img class=img src='a' />
<img class=img src='b' />
<img class=img src='c' />
<img class=img src='d' />
<img class=img src='e' />

还有这个按钮

 <button id=presstostart>PRESS ME TO START</button>

我希望单击按钮后开始一张一张显示图片，a,b,c,d,e，其中间隔为 2 秒。在 JQuery 中。没有插件....

【问题讨论】：

标签： javascript jquery image slider intervals

【解决方案1】：

您可以使用许多滑块插件。但我个人会推荐flexslider 和nivoslider。它们易于使用和定制。您还可以找到属性来设置动画速度、暂停时间、滑动方向等。

【讨论】：

【解决方案2】：

我在这个网址中找到了一个例子

http://www.jssor.com/development/index.html

<div id="slider1_container" style="position: relative; top: 0px; left: 0px; width: 600px; height: 300px;">
    <!-- Slides Container -->
    <div u="slides" style="cursor: move; position: absolute; overflow: hidden; left: 0px; top: 0px; width: 600px; height: 300px;">
        <div><img u="image" src="image1.jpg" /></div>
        <div><img u="image" src="image2.jpg" /></div>
    </div>
</div>

<!-- it works the same with all jquery version from 1.x to 2.x -->
<script src="jquery.min.js"></script>
<script src="jssor.slider.mini.js"></script>
<script>
    jQuery(document).ready(function ($) {
        var options = { $AutoPlay: true };
        var jssor_slider1 = new $JssorSlider$('slider1_container', options);
    });
</script>

您必须从上面的链接下载 js 库，而不是准备就绪，您可以将事件分配给单击按钮。

又一个例子…… http://jsfiddle.net/7WL6P/200/

【讨论】：