jQuery幻燈片庫圖像連續兩次顯示

Question

我想弄清楚爲什麼當我的jQuery幻燈片庫在圖像和標題之間循環時，第一部分信息（圖像，標題）連續出現兩次第一次通過循環。每個後續循環都會正確地交替顯示圖像。

<script type="text/javascript" src="js/jquery-1.3.1.min.js"></script> 
    <script type="text/javascript"> 

    $(document).ready(function() { 
    //Execute the slideShow 
    slideShow(); 

    }); 

    function slideShow() { 

    //Set the opacity of all images to 0 
    $('#gallery a').css({opacity: 0.0}); 
    //Get the first image and display it (set it to full opacity) 
    $('#gallery a:first').css({opacity: 1.0}); 
    //Set the caption background to semi-transparent 
    $('#gallery .caption').css({opacity: 0.7}); 

    //Resize the width of the caption according to the image width 
    $('#gallery .caption').css({width: $('#gallery a').find('img').css('width')}); 
    //Get the caption of the first image from REL attribute and display it 
    $('#gallery .cont').html($('#gallery a:first').find('img').attr('rel')) 
    .animate({opacity: 0.7}, 400); 
    //Call the gallery function to run the slideshow, 6000 = change to next image after 6  seconds 
    setInterval('gallery()',5000); 
    } 

    function gallery() { 
    //if no IMGs have the show class, grab the first image 
    var current = ($('#gallery a.show') ? $('#gallery a.show') : $('#gallery a:first')); 

    //Get next image, if it reached the end of the slideshow, rotate it back to the firstimage 
    var next = ((current.next().length) ? ((current.next().hasClass('caption'))?$('#gallery a:first') :current.next()) : $('#gallery a:first')); 
    //Get next image caption 
    var caption = next.find('img').attr('rel'); 
    //Set the fade in effect for the next image, show class has higher z-index 
    next.css({opacity: 0.0}) 
    .addClass('show') 
    .animate({opacity: 1.0}, 1000); 

    //Hide the current image 
    current.animate({opacity: 0.0}, 1000) 
    .removeClass('show'); 
    //Set the opacity to 0 and height to 1px 
    $('#gallery .caption').animate({opacity: 0.0}, { queue:false, duration:0 }).animate({height: '1px'}, { queue:true, duration:300 }); 
    //Animate the caption, opacity to 0.7 and heigth to 100px, a slide up effect 
    $('#gallery .caption').animate({opacity: 0.7},10).animate({height: '60px'},500); 
    //Display the content 
    $('#gallery .content').html(caption); 
    } 

    </script> 
    <style type="text/css"> 

    .clear { 
    clear:both; 
    } 

    #gallery { 
    position:relative; 
    height:360px; 
    } 
    #gallery a { 
    float:left; 
    position:absolute; 
    } 
    #gallery a img { 
    border:none; 
    } 
    #gallery a.show { 
    z-index:500; 
    } 

    #gallery .caption { 
    z-index:600; 
    background-color:#000; 
    color:#ffffff; 
    height:60px; 
    width:100%; 
    position:absolute; 
    bottom:0; 
    } 

    #gallery .caption .content { 
    margin:5px; 
    } 
    #gallery .caption .content h3 { 
    margin:0; 
    padding:0; 
    color:#1DCCEF; 
    } 
    </style> 

任何想法？謝謝，-qs

Answer 1

問題就在這裏：

var current = $('#gallery a.show') ? $('#gallery a.show') : $('#gallery a:first');

空列表truthy，所以即使$('#gallery a.show')不匹配任何表達式將始終評估爲$('#gallery a.show')。

一個簡單的解決將是這樣的：

var current = $('#gallery a.show').length ? $('#gallery a.show') : $('#gallery a:first');

不過，我認爲這是更好的在slideShow()添加$('#gallery a:first').addClass('show');忘記有關$('#gallery a.show')不匹配的情況。

http://jsfiddle.net/bkdf9q7j/10/