jquery，聚焦元素一次，然後滾動到下一個＆下一個和下一個

Question

我在頁面上顯示許多圖片。我想創建一箇中心在屏幕中間的圖片，用戶只需click。然後，在任何click事件之後，我想要顯示下一張圖片，直到用戶離開此演示模式。 注意：我將jquery scrollTo腳本添加到我的代碼中。

這是我迄今所做的：http://jsfiddle.net/qnQSP/3/

HTML

<div id="galleries"> 

    <div id="pictures-content" class="1"><img src="http://www.sb-designs.co.uk/ckfinder/userfiles/images/free%20web%20hosting.jpg"></div> 
    <div id="pictures-content" class="2"><img src="http://www.mastercreations.net/wp-content/uploads/2012/10/5.jpg"></div> 
    <div id="pictures-content" class="3"><img src="http://www.sb-designs.co.uk/ckfinder/userfiles/images/free%20web%20hosting.jpg"></div> 
    <div id="pictures-content" class="4"><img src="http://www.webdesign4essex.co.uk/images/essex_website_design.jpg"></div> 
    <div id="pictures-content" class="5"><img src="http://www.mastercreations.net/wp-content/uploads/2012/10/5.jpg"></div> 

</div> 

jQuery的

 var next; 
     var element_already_focus = 0; 
     var oldcurrent = "";   

     $("#galleries #pictures-content").unbind("click"); 
     $("#galleries #pictures-content").bind("click", function(event) { 
      // Count the number of pictures 
      var max_number_of_pictures= $('#galleries #pictures-content').length; 
    //   console.log("max_number_of_pictures: "+max_number_of_pictures); 

      // Get the binding element class number 
       var picture_number = $(this).attr('class'); 
    //   console.log("picture_number: "+picture_number); 

      // Save the element inside the current variable 
       current=$(this); 


      // Do a loop to go to the top picture when 
      if(picture_number==max_number_of_pictures) 
      { 
       next = $("#galleries .1"); 
      } else 
      { 
       next = $(this).next(); 
      } 

      // Do a loop to go to the bottom picture  
      if(picture_number==1){ 
       previous = $("#galleries ."+max_number_of_pictures); 
      } else { previous = $(this).prev();} 


    //  console.log("current: "+$(this).attr("class")); 
      if(oldcurrent != "") 
      { 
       console.log("old: "+oldcurrent.attr("class")); 
// Doing some test 
       class_test = parseInt(oldcurrent.attr("class")); 
       class_test = parseInt(class_test)+parseInt(1); 
       console.log("old: "+class_test); 
      } 

      console.log("previous: "+previous.attr("class")); 
      console.log("current: "+current.attr("class")); 
      console.log("next: "+next.attr("class")); 

    if(oldcurrent == "") 
    { 
     $("body").scrollTo(current, 800); 
     next = 0; 
     console.log("What we do:"+next); 
    } 
    else{ 
    // If the element that we are binding have the same class as the old binding element (previous) 
    // We are redirecting the user to the next picture 
      console.log("oldcurrent "+oldcurrent.attr("class")); 
      console.log("current: "+current.attr("class")); 
      console.log("next: "+next.attr("class")); 

    // if((oldcurrent.attr("class"))==($(this).attr("class"))||(class_test)==(next.attr("class"))) { 
     if((oldcurrent.attr("class"))==(current.attr("class"))||(class_test)==(next.attr("class"))) { 
      $("body").scrollTo(next, 800);  
      next = 1; 
      console.log("What we do:"+next); 
     }else{ 
      $("body").scrollTo(current, 800); 
      next = 0; 
      console.log("What we do:"+next); 
     }  
    } 

     oldcurrent=current; 

     }); 

我的問題：我需要點擊圖片兩次去下一個。如果我刪除了這個條件，當我離開演示模式時，我將無法聚焦另一張照片。

我想我有當用戶在演示模式來定義的狀態（已點擊圖片），當他被搬走回採演示模式刪除此狀態。

有人有任何想法或解決方案嗎？

Answer 1

單擊時只需驗證圖像是否在渲染的視圖內。如果是，那麼你可以假定點擊是滾動到下一個圖像。

您可以使用$(yourImage).position().top來知道圖像的起始位置。和$(yourImage).height()知道它的高度。

var imageTop = $(yourImage).position().top, 
    imageHeight = $(yourImage).height(), 
    windowTop = $(yourImage).height(), 
    windowHeight = $(window).height(); 

if(imageTop>windowTop && top+height < windowTop+windowHeight){ 
    Scroll to the next one 
} 

或者，如果你想始終堅持到頂部的圖像：

if(imageTop==windowTop){ 
    Scroll to the next one 
} 

+1用於鏈接小提琴