jquery幻灯片放映问题

Question

基本上，我在一年的不同月份有不同的图像，我试图做的是点击某个月，并在幻灯片上显示与该月相关的图像页面，link text（这是用于测试目的），

但问题是，当我点击第一个月（1月），我也得到幻灯片放映下个月的图像，当我点击第二个月我没有照片，我似乎无法解决这个问题，任何帮助，将不胜感激，

如果它是太多的故障排除代码，我怎么能这样做，（即不同的幻灯片显示不同的月份年） 。

感谢

<div id="main_content"> 

    <div id="gallery_page"> 
     <div class="slide"> 
      <span id="first"><p>Jan 2008</p></span> 
      <span id="second"><p>Feb 2008</p></span> 
      <span id="third"><p>March 2008</p></span> 
      <span id="forth"><p>April 2008</p></span> 
      <span id="fifth"><p>May 2008</p></span> 
      <span id="sixth"><p>June 2008</p></span> 
      <span id="seventh"><p>July 2008</p></span> 
      <span id="eighth"><p>August 2008</p></span> 
     </div> 
     <div class="slide"> 
      <span id="ninth"><p>Feb 2007</p></span> 
      <span id="tenth"><p>Feb 2007</p></span> 
      <span id="eleventh"><p>Feb 2007</p></span> 
      <span id="twelvth"><p>Feb 2007</p></span> 
      <span id="thirteenth"><p>Feb 2007</p></span> 
      <span id="fourteenth"><p>Feb 2007</p></span> 
      <span id="fifteenth"><p>Feb 2007</p></span> 
      <span id="sixteenth"><p>Feb 2007</p></span> 
     </div> 
     <div id="main_gallery_pics2"> 
      <div class="slide2"> 
       <img src="images/gallery/feb2008/dal.jpg" /> 
      </div> 
      <div class="slide2"> 
       <img src="images/people/miles.jpg" /> 
      </div> 
     </div> 

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

$(document).ready(function(){ 
    var currentPosition2 = 0; 
    var slideWidth2 = 475; 
    var slides2 = $('.slide2'); 
    var numberOfSlides2 = slides2.length; 

    // Remove scrollbar in JS 
    $('#main_gallery_pics2,#main_gallery_pics3').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); 



    // 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 
    manageControls2(currentPosition2); 

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

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

     // Hide/show controls 
     manageControls2(currentPosition2); 
     // Move slideInner using margin-left 
     $('#slideInner2').animate({ 
     'marginLeft' : slideWidth2*(-currentPosition2) 
     }); 
    }); 

    // manageControls: Hides and shows controls depending on currentPosition 
    function manageControls2(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

你有gallery_pic_replace.js一个错字。当您单击二月，你去后：

$('#main_gallery_pics3') 

但在您的标记是

<div id="main_gallery_pic3"> 

偷偷摸摸的'....

编辑： 的下一个问题是：

slides2 
    .wrapAll('<div id="slideInner2"></div>') 

你正在把所有的幻灯片和包装在一个div中。这导致他们重新定位到1月份。