圖庫中的循環圖像

Question

我正在使用jquery創建自定義圖庫，使用fancybox，現在我遇到了問題。無論何時用戶點擊下一個/上一個按鈕，我都會調用一個javascript方法，它將檢索有關該照片的所有細節並動態顯示它。但用目前的方法，我無法實現圖像的無限循環。

例如，如果我們有10個圖像，並且當用戶在第10個圖像之後點擊下一個圖像時，它應該轉到第一個圖像，並且循環也按照前一個按鈕的方式繼續。我盡我所能，但我無法弄清楚。我的代碼是

photoArray是一個JSON數組，它包含我將在庫中顯示的所有照片的信息。

function showNextPrevious(value) { 
    var presentPhotoId = $('#presentId').val(); 
    var length = photoArray.length; 
    if(value == "next") { 
     for(var i=0; i<photoArray.length; i++) { 
      if(i!=length-1) {    
       var id = photoArray[i].photo_id; 
       if(id == presentPhotoId) {  
        var tags = (typeof photoArray[i+1].tags!= "undefined")?photoArray[i+1].tags:""; 

        var caption = photoArray[i+1].caption; 
        var source = photoArray[i+1].owner; 
        var mainPhoto = photoArray[i+1].main_photo; 
        var photoId = photoArray[i+1].photo_id; 
        var path = photoArray[i+1].path; 
        var mediumpath = replaceAll(path,".jpg", "_medium.jpg"); 
        var ownerlink = photoArray[i+1].source_link; 
        var owner = photoArray[i+1].owner; 

        $('#tag').text(tags); 
        $('#caption').text(caption); 
        $("#photoCount").text(((i+1)+1)+"/"+photoArray.length); 
        $('#presentId').val(photoId); 
        $('#owner').text(owner); 
        $('#mainphoto').attr("src" , mediumpath); 
        if(owner!='NULL' || owner.length>0) { 
         $('#ownerlink').attr("href" , "http://flickr.com/search/people/?q="+owner); 
         $('#ownerlink').attr("target" , "_blank"); 
        } else { 
         $('#ownerlink').attr("href" , "javascript:void('0')"); 
         $('#ownerlink').attr("target" , "_self"); 
        } 

        if(mainPhoto == "Yes"){ 
         $('#mainP').html('<div style="display:block;color:#000000;">Currently the main photo for this city.</div>'); 
        } else { 
         $('#mainP').html('<div style="display:block;"><input name="" type="button" class="button-small" value="Make this the main photo for this city" onclick="javascript:changeMainPhoto(\''+photoArray[i+1].photo_id+'\','+photoArray[i+1].city+')" /></div>'); 
        }     
       } // End of if(id == presentPhotoId) 
      } 
     } 
    } else if(value == "previous") { 
     for(var i = 0;i<photoArray.length;i++){ 
      var id = photoArray[i].photo_id;    
      if(id == presentPhotoId){ 
       var tags = (typeof photoArray[i-1].tags!="undefined")?photoArray[i-1].tags:""; 
       var caption = photoArray[i-1].caption; 
       var source = photoArray[i-1].owner; 
       var mainPhoto = photoArray[i-1].main_photo; 
       var photoId = photoArray[i-1].photo_id; 
       var path = photoArray[i-1].path; 
       var mediumpath = replaceAll(path,".jpg", "_medium.jpg"); 
       var ownerlink = photoArray[i-1].source_link; 
       var owner = photoArray[i-1].owner; 

       $('#tag').text(tags); 
       $('#caption').text(caption); 
       $('#presentId').val(photoId); 
       $('#owner').text(owner); 
       $("#photoCount").text(((i-1)+1)+"/"+photoArray.length); 
       $('#mainphoto').attr("src" , mediumpath); 
       if(owner!='NULL' || owner.length>0) { 
        $('#ownerlink').attr("href" , "http://flickr.com/search/people/?q="+owner); 
        $('#ownerlink').attr("target" , "_blank"); 
       } else { 
        $('#ownerlink').attr("href" , "javascript:void(0)"); 
        $('#ownerlink').attr("target" , "_self"); 
       }  
       if(mainPhoto == "Yes") { 
        $('#mainP').html('<div style="display:block;">Currently the main photo for this city.</div>'); 
       } else { 
        $('#mainP').html('<div style="display:block;"><input name="" type="button" class="button-small" value="Make this the main photo for this city" onclick="javascript:changeMainPhoto(\''+photoArray[i-1].photo_id+'\','+photoArray[i-1].city+')" /></div>'); 
       } 
      } 
     } 
    } 
} 

Answer 1

如果你的目標是模擬一個無限循環，那麼我建議你要麼執行下列操作之一：

1. 「迴歸」第一個圖像的「起始位置」（以換句話說，一旦你到達了數組中的最後一個元素，將它從數組的起始處移開並添加到末尾）
2. 複製第一個圖像，並在到達最後一個圖像時將它添加到數組的末尾元素（這可能會導致性能問題，取決於fancybox的工作原理 - 我不知道它是否真的取消了一旦它們不再可見，它就已經查看了DOM中的元素）
3. 結合了1和2（並且有效地消除了對fancybox不刪除已查看元素的性能的擔心）複製第一個元素，將其添加到數組的末尾，然後等到它不再可見時才從數組中移除它。

我建議你去選擇三項 - 它具有最好的安全性，它說明你沒有足夠的元素來重複之前填充整個滑塊。這個想法是在第一個元素滑動時調用.offset()方法（我假設你可以使用一個step函數 - 否則你可能需要一個計時器），然後將offset的left屬性的值加到元素來獲取元素的當前結束x座標。將其與滑動容器的起始座標（如果您知道它的靜態位置或容器偏移的left屬性）進行比較，並在容器偏移量較大時移除該元素。

讓我知道如果您有任何問題或需要澄清。祝你好運！ :)