Question

基本上我在一年中的不同月份有不同的图像，我要做的是点击某个月，并在页面顶部显示与该月相关的图像，{{3 （这是出于测试目的），

但问题是，当我点击第一个月（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中输错了。当你点击2月，你就会追求：

$('#main_gallery_pics3')

但是在你的标记中它是

<div id="main_gallery_pic3">

Sneaky的'....

编辑：下一期是：

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

你正在拍摄所有幻灯片并将它们包装在一个div中。这导致它们重新定位到1月div。

jquery幻灯片放映的问题

1 个答案: