滑块jquery与页面加载问题

Question

我有一个工作正常的简单滑块，但是在第一秒，也许是页面加载，它搞砸了，很奇怪。

Jsfiddle

JQUERY

var currentIndex = 0;// store current pane index displayed
var ePanes = $('#slider li'), // store panes collection
    time   = 3000,
    bar = $('.progress_bar');

function showPane(index){// generic showPane
    // reset bar
    bar.stop(true, true).css("width", 0).animate({'width': "100%"}, time, run);
    // hide current pane
    ePanes.eq(currentIndex).stop(true, true).fadeOut();
    // set current index : check in panes collection length
    currentIndex = index;
    if(currentIndex < 0) currentIndex = ePanes.length-1;
    else if(currentIndex >= ePanes.length) currentIndex = 0;
    // display pane
    ePanes.eq(currentIndex).stop(true, true).fadeIn();
}

// apply start pane
showPane(0);

function run(){
    bar.width(0);
    showPane(currentIndex+1);
    bar.animate({'width': "100%"}, time, run);
}

run();

Answer 1

您的滑块尝试在第一张幻灯片完成操作之前立即加载页面上的所有CSS元素。尝试将display: none;添加到ul#slider li以隐藏开头的所有元素，并相应地调整jQuery。

Updated JSFiddle

Answer 2

请记住将函数声明放在文档外部并在document ready / window.onload

中调用它