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变量。

Answer 2

当您打开新图库时，只需将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();
});

jquery幻灯片放映的问题

2 个答案: