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和宽度，这样我就能在屏幕上正确看到滑块（将所有宽度减少400px）。小提琴中还有一些东西丢失了：

你没有包含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();
}

然后，您只需要使用$(document).ready(...)调用末尾setInterval处的函数，让动画自动启动（以毫秒为单位更改2500）：

setInterval("animatePanels()", 2500);

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

创建一个自动滚动滑块

1 个答案: