jQuery的照片幻灯片错误

Question

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

这个幻灯片放映画廊的工作方式是UL中有多个列表项目，每个列表项目中都有一个图像。按顺序一个列表项具有类.show，并且这会更改该列表项的css，因此opaque被设置为1.使其可见。计时器确定列表项目何时更改，以便层次结构中的下一个列表项目具有.show。一旦到达最后一个列表项目，它就会返回到第一个项目。

我用我的代码的问题是，当第一次加载页面时，第一个图像显示在第二个图像前简要显示。发生这种情况后，幻灯片放映行为正确。

粗体是重要的代码行。首先我使用jquery将.class分配给第一个列表项。粗体代码的第二行是一个条件语句。如果没有图像显示，请将其分配给第一个列表项目。这是代码无法按预期工作的情况。

---

$(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'); 
} 

就如何解决这一问题将是最受欢迎的任何建议。

尼克

Answer 1

我觉得有点傻，但已经找到了我的代码问题。当文档准备就绪时，您会注意到我已经调用了图库功能。我还在幻灯片放映功能中调用了画廊功能。

因此，当页面加载时，图库函数被调用两次，然后它将像正常一样运行。只需在幻灯片放映功能中调用画廊。

尼克