页面加载滑块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

记得把你的函数声明以外的文件准备，并调用它里面的文件准备/在window.onload