jQuery照片幻灯片放映错误答案

【问题标题】：jQuery photo slide show bugjQuery照片幻灯片放映错误
【发布时间】：2011-10-20 17:56:23
【问题描述】：

我正在使用来自http://www.queness.com/post/1450/jquery-photo-slide-show-with-slick-caption-tutorial-revisited 的照片幻灯片放映的一些出色代码。

此幻灯片画廊的工作方式是 UL 中有多个列表项，每个列表项中都有一张图像。依次一个列表项具有 .show 类，这会更改该列表项的 css，因此 opaque 设置为 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');
}

欢迎任何有关如何解决此问题的建议。

尼克

【问题讨论】：

任何建议，我将问题缩小到这行代码： var current = ($('ul.slideshow li.show') ? $('ul.slideshow li.show') ： $('#ul.slideshow li:first')); .不知道如何解决。

标签： javascript jquery

【解决方案1】：

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

因此，当页面加载时，gallery 函数被调用了两次，然后它就会正常运行。图库只需在幻灯片功能中调用即可。

尼克

【讨论】：