問題與jQuery幻燈片放映

Question

我有不同的幻燈片的畫廊頁面，每個幻燈片連接到不同的日期，當我點擊一個特定的日期時，相應的幻燈片將出現，問題是，查看第一張幻燈片顯示並單擊第二張幻燈片，幻燈片不從第一張幻燈片開始，它顯示從上一張幻燈片編號，我想知道是否有人可以幫助我解決此問題。謝謝

更新：設置後currentPosition = 0;我需要點擊右箭頭將幻燈片放到第一張幻燈片上（這是因爲連接到箭頭的.bind（'click'，函數），所以我想知道如何才能將幻燈片放到第一張幻燈片中通過點擊相應的畫廊，鏈接到該網站是link text

<div id="gallery_page"> 
    <div class="slide"> 
     <span id="first"><p>King Baby Lunch Party</p></span> 
     <span id="second"><p>Feb 2008</p></span> 
    </div> 
</div> 



<div id="main_gallery_pics_first"> 
    <div class="slide2"> 
     <img src="" /> 
    </div> 
    <div class="slide2"> 
     <img src="" /> 
    </div> 
    <div class="slide2"> 
     <img src="" /> 
    </div> 
</div> 

<div id="main_gallery_pics_second"> 
    <div class="slide3"> 
     <img src="images/people/miles.jpg" /> 
    </div> 
    <div class="slide3"> 
     <img src="images/people/dal.jpg" /> 
    </div> 
</div> 


$(document).ready(function(){ 

    var currentPosition = 0; 
    var slideWidth2 = 475; 
    var slideWidth3 = 475; 
    var slides2 = $('.slide2'); 
    var slides3 = $('.slide3'); 
    var numberOfSlides2 = slides2.length; 
    var numberOfSlides3 = slides3.length; 

    function hide() { 
    $('#main_gallery_pics_first,#main_gallery_pics_second').hide(); 
    } 
    //hide everything 
    hide(); 

    //show first gallery on page load 
    $('#main_gallery_pics_first').show(); 

    //show appropriate gallery when one is clicked 
    var id; 
    $('.slide span').click(function() { 
    id = $(this).attr('id'); 
    hide(); 
    $('#main_gallery_pics_'+id).show(); 
    }); 


    // Remove scrollbar in JS 
// $('#main_gallery_pics_first,#main_gallery_pics_second').css('overflow', 'hidden'); 

    // Wrap all .slides with #slideInner div 
    slides2 
    .wrapAll('<div id="slideInner2"></div>') 
    // Float left to display horizontally, readjust .slides width 
    .css({ 
    'float' : 'left', 
    'width' : slideWidth2 
    }); 

    // Set #slideInner width equal to total width of all slides 
    $('#slideInner2').css('width', slideWidth2 * numberOfSlides2); 

    // Wrap all .slides with #slideInner div 
    slides3 
    .wrapAll('<div id="slideInner3"></div>') 
    // Float left to display horizontally, readjust .slides width 
    .css({ 
    'float' : 'left', 
    'width' : slideWidth3 
    }); 

    // Set #slideInner width equal to total width of all slides 
    $('#slideInner3').css('width', slideWidth3 * numberOfSlides3); 


    // Insert left and right arrow controls in the DOM 
    $('#main_content') 
    .prepend('<span class="control2" id="left_arrow2">Move left</span>') 
    .append('<span class="control2" id="right_arrow2">Move right</span>'); 


    // Hide left arrow control on first load 
    manageControls(currentPosition); 

    // Create event listeners for .controls clicks 
    $('.control2') 
    .bind('click', function(){ 
    // Determine new position 

     currentPosition = ($(this).attr('id')=='right_arrow2') 
    ? currentPosition+1 : currentPosition-1; 


     // Hide/show controls 
     manageControls(currentPosition); 
     // Move slideInner using margin-left 

     $('#slideInner2').animate({ 
     'marginLeft' : slideWidth2*(-currentPosition) 
     }); 


     $('#slideInner3').animate({ 
     'marginLeft' : slideWidth3*(-currentPosition) 
     }); 

    }); 


    // manageControls: Hides and shows controls depending on currentPosition 
    function manageControls(position){ 

    // Hide left arrow if position is first slide 
    if(position==0){ $('#left_arrow2').hide() } 
    else{ $('#left_arrow2').show() } 
    // Hide right arrow if position is last slide 
    if(position==numberOfSlides2-1){ $('#right_arrow2').hide() } 
    else{ $('#right_arrow2').show() } 
    } 

    }); 

Answer 1

只需設置currentPosition到0當你打開一個新的畫廊

$('.slide span').click(function() { 
    //not needed actually 
    //id = $(this).attr('id'); 

    //reset position and margins 
    currentPosition = 0; 
    $('#slideInner2').css('marginLeft' , 0); 
    $('#slideInner3').css('marginLeft' , 0); 

    hide(); 
    $('#main_gallery_pics_'+this.id).show(); 
}); 

Answer 2

復位currentposition變量當你開始新的幻燈片。