如何在页面加载时自动启动幻灯片

Question

我在 jQuery 中构建了一个小型幻灯片。这很简单。如何在页面加载时自动启动滑块？滑块应该一直运行。只有当用户点击我的缩略图时，滑块才会直接跳转到该幻灯片。

var totalWidth = 0;
var positions = new Array();

$('.slides .slide').each(function (i) {
    positions[i] = totalWidth;
    totalWidth += $(this).width();
});

$('.slides').width(totalWidth);

$('.slideMenu ul li a').click(function (e) {
    var pos = $(this).parent().prevAll('.menuItem').length;
    $('.slides').stop().animate({
        marginLeft: -positions[pos] + 'px'
    }, 450);

    e.preventDefault();
});

Here is my fiddle

Answer 1

试试这样的：

function goNextSlide() {
    // Do animate stuff here
    setTimeout(goNextSlide(), 60);
}

$( document ).ready(function() {
    goNextSlide();
});

或者对你有用的快速破解：

function goNextSlide(slide) {
    $(".slideMenu ul li a:nth-child("+slide+")").click();
    slide++;
    if(slide>3) {
         slide = 0;   
    }
    setTimeout(goNextSlide(slide), 600);
}

$( document ).ready(function() {
    goNextSlide(1);
});