頁面加載滑塊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