创建一个自动滚动滑块

Question

我找到了 this accordion slider which fits my needs, 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 和宽度，这样我就可以在屏幕上正确看到滑块（所有宽度都减少了 400 像素）。 fiddle 中仍然缺少一些东西：

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

修复这两个问题后，滑块工作正常（您可以在此处查看：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();
}

然后，你只需要用setInterval调用最后的函数$(document).ready(...)就可以让动画自动开始（将2500更改为你想要的时间，以毫秒为单位）：

setInterval("animatePanels()", 2500);

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

创建一个自动滚动滑块

Create an autoscroll slider

html

javascript

css

jquery

slideshow