javascript - 创建自动滚动 slider

Question

我找到了this accordion slider这符合我的需求，see demo ，但它不会自动开始滑动。

$(document).ready(function(){

  activePanel = $("#accordion div.panel:first");
  $(activePanel).addClass('active');

  $("#accordion").delegate('.panel', 'click', function(e){
    if( ! $(this).is('.active') ){
        $(activePanel).animate({width: "44px"}, 300);
        $(this).animate({width: "848px"}, 300);
        $('#accordion .panel').removeClass('active');
        $(this).addClass('active');
        activePanel = this;
    };
  });
});

这是 jsfiddle 上的所有代码(如果有帮助的话)(尽管即使更改宽度后它也无法正确显示): http://jsfiddle.net/wamcbrf3/

我尝试添加这个但没有帮助:

autoPlay: {
   enabled: true,
   delay: 1500
}

我是 jquery 新手，所以任何指点将不胜感激，谢谢

Answer 1

我修复了一些缺失的 HTML 和宽度，以便我可以在屏幕中正确地看到 slider (将所有宽度减少 400 像素)。 fiddle 中仍然缺少一些东西:

• 您没有包含 jQuery。
• 只有一个面板，因此无法滑动。

修复这两件事后， slider 工作正常(您可以在这里看到它:http://jsfiddle.net/wamcbrf3/1/)

对于自动播放，我创建了一个小函数:

function animatePanels() {
    // select the next active panel
    nextPanel = $("#accordion div.panel.active").next();
    // if the length is 0: we were at the last panel, so select the first one instead
    if (nextPanel.length == 0) { nextPanel = $("#accordion div.panel:first"); } 
    // click on the panel to trigger the animation
    $(nextPanel).click();
}

然后，您只需在末尾调用该函数 $(document).ready(...) 并使用 setInterval 即可让动画自动开始(将 2500 更改为您想要的时间(以毫秒为单位):

setInterval("animatePanels()", 2500);

您可以在这个jsfiddle上看到一个运行示例:http://jsfiddle.net/wamcbrf3/4/