jQuery写真のスライドショーのバグ

Question

私はhttp://www.queness.com/post/1450/jquery-photo-slide-show-with-slick-caption-tutorial-revisitedからフォトスライドショーの優れたコードを使用しています。

このスライドショーギャラリーの仕組みは、ULに複数のリストアイテムがあり、各リストアイテム内にイメージがあることです。順番に1つのリスト項目には.showクラスがあり、これはそのリスト項目のCSSを変更して、不透明度が1になるように変更します。タイマーは、階層内の次のリスト項目が.showを持つようにリスト項目がいつ変化するかを決定します。最後のリストアイテムに到達すると、最初のアイテムに戻ります。

私のコードで問題があるのは、ページが最初に読み込まれると、最初のイメージが2番目のイメージに変更する前に短時間表示されるということです。この後、スライドショーは正しく動作します。

太字で表示されるのは、重要なコード行です。最初に、jqueryを使用して.classを最初のリスト項目に割り当てます。太字の2行目のコードは条件文です。 .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

私は少し愚かな感じが、私のコードの問題を考え出しました。ドキュメントの準備が整ったら、ギャラリー機能が呼び出されたことに気づくでしょう。私はまた、スライドショー機能でギャラリー機能を呼びました。

したがって、ページが読み込まれるとギャラリー関数が2回呼び出されていて、それが正常に動作します。ギャラリーはスライドショー機能でのみ呼び出す必要があります。

ニック