想要将自动播放设置添加到响应式图像库

Want to add Autoplay setting to Responsive Image Gallery.

本文关键字：响应 图像 添加 自动播放 设置      更新时间：2023-09-26

我已将此图片库 http://tympanus.net/codrops/2011/09/20/responsive-image-gallery/添加到我正在处理的站点。完美运行，唯一的问题是没有自动播放幻灯片的选项。

http://www.debellephotography.com/debelleslide/

任何帮助将不胜感激！

我在这里和那里拼凑起来，想出一种方法来做到这一点，谢谢你的帮助。 

var t;
var timer_is_on=0;
function timedCount()
{
$('.rg-image-nav-next').click()
t=setTimeout("timedCount()",1000);
}
function doTimer()
{
if (!timer_is_on)
{
timer_is_on=1;
timedCount(1000);
}
}
function stopCount()
{
clearTimeout(t);
timer_is_on=0;
}

timeCount 函数每 1 秒激活下一个图像。doTimer 功能可防止多次激活计时器。stopCount 函数允许暂停幻灯片放映。

然后，我添加了两个按钮来暂停和播放：

<div class="playbutton"><a href="javascript:doTimer();"><img src="images/play.png" width="24" height="24" alt="Play"></a></div>
<div class="pausebutton"><a href="javascript:stopCount();"><img src="images/pause.png" width="24" height="24" alt="Pause"></a></div>

您可以在此处看到它的工作原理：自动播放示例

您希望创建一个新按钮，用于触发 setInterval 函数循环浏览幻灯片。它看起来像这样：

<button onclick="play()">slideshow</button>
function play() {
    setInterval(function() {
       // Do the code that triggers next image
    }, 1000);
}

数字 1000 是运行函数之间的毫秒数。

试试这个

var current=1;
    function autoAdv()
    {
        if(current==-1) return false;
        $('.es-carousel a').eq(current%$('.es-carousel a').length).trigger('click',[true]);    // [true] will be passed as the contentScroll parameter of the click function
        current++;
        $('.rg-image-nav-prev').eq(current%$('.rg-image-nav-prev').length).trigger('click',[true]);    // [true] will be passed as the contentScroll parameter of the click function
        current++;
    }
    // The number of seconds that the slider will auto-advance in:
    var changeEvery = 10;
    var itvl = setInterval(function(){autoAdv()},changeEvery*1000);​
相关文章：