Question

我正在使用一些优秀的代码来展示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');
}

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

尼克

Answer 1

我觉得有点傻但是我的代码已经弄明白了。您会注意到我在文档准备好后调用了gallery功能。我还在幻灯片放映功能中调用了gallery功能。

因此，当页面加载时，库函数被调用两次，然后它将表现正常。只需要在幻灯片放映功能中调用图库。

尼克

jQuery照片幻灯片显示错误

1 个答案: