0

我正在使用 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>');
                }
            }
        }
    }
}
4

1 回答 1

0

如果您的目标是模拟无限循环，那么我建议您执行以下操作之一：

  1. 到达数组中的最后一个元素后，将第一个图像“返回”到“起始位置”（换句话说，将其从数组的开头删除并将其添加到末尾）
  2. 复制第一个图像并在到达最后一个元素后将其添加到数组的末尾（这可能会导致性能问题，具体取决于 fancybox 的工作方式 - 我不知道它是否真的从 DOM 中删除了已查看的元素，一次它们不再可见）
  3. 通过复制第一个元素，将其添加到数组的末尾，然后等到它不再可见以将其从阵列中删除。

我建议您使用选项三 - 它具有最佳安全性，并且它说明您在重复之前没有足够的元素来填充整个滑块。想法是.offset()在第一个元素滑动时调用该方法（我假设您可以使用步进函数 - 否则您可能需要一个计时器），然后将left偏移量属性的值添加到元素的宽度获取元素的当前结束 x 坐标。将其与滑动容器的起始坐标（静态位置，如果你知道的话，或者容器的偏移量的left属性）进行比较，如果容器的偏移量更大，则移除元素。

如果您有任何问题或需要澄清，请告诉我。祝你好运！:)

于 2012-10-26T15:02:19.087 回答