jQuery图片幻灯片显示bug

我正在使用一些优秀的代码从http://www.queness.com/post/1450/jquery-photo-slide-show-with-slick-caption-tutorial-revisited的照片幻灯片。

这个幻灯片放映库的工作方式是在一个UL中有多个列表项，每个列表项中都有一个图像。依次有一个列表项具有.show类，这将改变该列表项的CSS，因此不透明设置为1。使其可见。计时器确定列表项何时更改，因此层次结构中的下一个列表项具有.show。一旦到达列表的最后一项，它就返回到第一个项。

我的代码的问题是，当页面第一次加载时，第一个图像在切换到第二个图像之前短暂显示。在此之后，幻灯片放映将正常运行。

用粗体表示重要的代码行。首先，我使用jquery将.class赋值给第一个列表项。黑体显示的第二行代码是一个条件语句。如果没有图像带有.show，则将其分配给第一个列表项。这是代码没有按预期工作的时候。

$(document).ready(function (e) {
// Execute the slideShow
slideShow(6000);
thumbInt(); // Assign int to thumbnail list items
gallery();
function clearShowClass() {
    setTimeout(timedInterval, 1000);
};
function timedInterval() {
    $('ul.slideshow li').not('.show').css("opacity", 0);
    clearShowClass();
}
function slideShow(speed) {
    //Set the opacity of all images to 0
    $('ul.slideshow li').css({
        opacity: 0.0
    });
    //Get the first image and display it (set it to full opacity)
    * * $('ul.slideshow li:first').css({
        opacity: 1.0
    }).addClass('show'); * *
    //Get the first thumbnail and change css
    $('#footer li:first').addClass('highlight');
    //Call the gallery function to run the slideshow
    var timer = setInterval('gallery()', speed);
    //Pause the slideshow on mouse over content
    $('#footer, ul.slideshow').hover(
    function () {
        clearInterval(timer);
    }, function () {
        timer = setInterval('gallery()', speed);
    });
}
function gallery() {
    //if no IMGs have the show class, grab the first image
    * *
    var current = ($('ul.slideshow li.show') ? $('ul.slideshow li.show') : $('#ul.slideshow li:first')); * *
    if (current.queue('fx').length == 0) {
        // grab next image and animate code in here
    }
    //Get next image, if it reached the end of the slideshow, rotate it back to the first image
    var next = ((current.next().length) ? ((current.next().attr('id') == 'slideshow-caption') ? $('ul.slideshow li:first') : current.next()) : $('ul.slideshow li:first'));
    //Set the fade in effect for the next image, show class has higher z-index
    next.css({
        opacity: 0.0
    }).addClass('show').animate({
        opacity: 4.0
    }, 1000);
    // Hide the current image
    current.animate({
        opacity: 0.0
    }, 1000).removeClass('show');
    //if no thumbnails have the highlight class, grab the first thumbnail
    var currentThumb = ($('#footer li.highlight') ? $('#footer li.highlight') : $('#footer li:first'));
    var nextThumb = ($('#footer li:last').hasClass('highlight')) ? $('#footer li:nth-child(1)') : $('#footer li.highlight').next($('#footer li'));
    nextThumb.addClass('highlight');
    currentThumb.removeClass('highlight');
}

任何关于如何解决这个问题的建议都是非常欢迎的。