使用 Jquery 或 javascript 将幻灯片功能添加到画廊

Question

我想要实现的是触发自动幻灯片放映的切换按钮。就像一个 play/pause 按钮。

我正在使用来自 html5up.net 的图片库，模板在这里：

下一张图片当前在点击时触发：

<div class="nav-next"></div>

在 HTML 中，图库显示为原样，单击缩略图将激活相应的图像。

<section id="thumbnails">
<article>
<a class="thumbnail" href="images/fulls/114.png">
<img src="images/thumbs/114.jpg"/></a>
</article>

<article>
<a class="thumbnail" href="images/fulls/116.png">
<img src="images/thumbs/116.jpg"/></a>
</article>

<article>
<a class="thumbnail" href="images/fulls/168.png">
<img src="images/thumbs/168.jpg"/></a>
</article>
</section>

我正在尝试各种尝试：

function slideSwitch() {
    var $active = $('.thumbnail');
    var $next = $active.next();    

    $next.addClass('active');

    $active.removeClass('active');
}

$(function() {
    setInterval( "slideSwitch()", 5000 );
});

然而，由于我不确定我错过了什么，所以此时才感到沮丧。

如果您想进行实验，这里有一个最小版本的图库：

https://codepen.io/anon/pen/VWwVqd

Answer 1

您是否在页面标题中包含了 jQuery 插件？

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

Answer 2

我想出了这样的幻灯片功能：

$(function(){
        setInterval(function() {
            $('.nav-next').trigger('click');
        }, 7000);

});

使用 Jquery 或 javascript 将幻灯片功能添加到画廊

Add slideshow function to gallery using Jquery or javascript

html

jquery

gallery

slideshow