Javascript 在脚本上集成时奇怪的计数器行为

好的，我已经完成了这个代码

我刚刚做了一些css更改，并将image\u wrap重命名为image\u wrap\u galeria

这里

但是柜台并没有把IMG计算在内

我真的试过调试这个。我找不到错误

这是我的JS代码

<script>
$(function() {
    $(".scrollable").scrollable();

    var scrollapi = $(".scrollable").data('scrollable');

    $(".items img").click(function() {
        // see if same thumb is being clicked
        if ($(this).hasClass("active")) { return; }

        // calclulate large image's URL based on the thumbnail URL (flickr specific)
        var url = $(this).attr("src").replace("t_", "");


        // get handle to element that wraps the image and make it semi-transparent
        var wrap = $("#image_wrap_galeria").fadeTo("medium", 0.5);
        var wrap2 = $("#mainim");

        // the large image from www.flickr.com
        var img = new Image();


        // call this function after it's loaded
        img.onload = function() {

            // make wrapper fully visible
            wrap.fadeTo("fast", 1);

            // change the image
            wrap.find("img").attr("src", url);
            wrap2.find("img").attr("src", url);


        };

        // begin loading the image from www.flickr.com
        img.src = url;

        // activate item
        $(".items img").removeClass("active");
        $(this).addClass("active");

    // when page loads simulate a "click" on the first image
    }).filter(":first").click();


    $("img[rel]").overlay({
        // some mask tweaks suitable for modal dialogs
        mask: {
            color: '#ebecff',
            loadSpeed: 200,
            opacity: 0.9
        },
        closeOnClick: true,
        onBeforeLoad: function() {
            var items = $('.items'),
                count = items.find("img").length,
                current = items.find('.active'),
                currentIndex = current.index("img");


            $("#imageCounter").html( currentIndex+" of "+count);
        }
    });
    //NExt BTN

    $(".nextImg").click(function(){
        // Count all images
        var items = $('.items'),
            images = items.find('img'),
            count = images.length,
            currentImage = items.find('.active'),
            currentImageIndex = images.index(currentImage),
            next = $(images.get(currentImageIndex + 1)),
            nextImageIndex = images.index(next);

        if ( currentImageIndex === (count - 1) ){
            next = $(images.get(0));
            nextImageIndex = images.index(next);
        }

        if (nextImageIndex === 0) {
            scrollapi.begin(200);
        } else if ( nextImageIndex % 4 === 0 && nextImageIndex > 0) {
            scrollapi.next(200);
        }

        // Get the current image number
        var current = $(next.index("img"));

        var nextUrl = next.attr("src").replace("t_", "");

        // get handle to element that wraps the image and make it semi-transparent
        var wrap = $("#image_wrap_galeria").fadeTo("medium", 0.5);
        var wrap2 = $("#mainim");

        // the large image from www.flickr.com
        var img = new Image();

        // call this function after it's loaded
        img.onload = function() {
            // make wrapper fully visible
            wrap.fadeTo("fast", 1);

            // change the image
            wrap.find("img").attr("src", nextUrl);
            wrap2.find("img").attr("src", nextUrl);
        };

        // begin loading the image from www.flickr.com
        img.src = nextUrl;

        $("#imageCounter").html((nextImageIndex + 1) +" of "+count);

        // activate item
        $(".items img").removeClass("active");
        next.addClass("active");
    });

    //PREV BTN
    $(".prevImg").click(function(){
        // Count all images
        var items = $('.items'),
            images = items.find('img'),
            count = images.length,
            currentImage = items.find('.active'),
            currentImageIndex = images.index(currentImage),
            prev = $(images.get(currentImageIndex - 1)),
            prevImageIndex = images.index(prev);

        // var prev = $(".items").find(".active").prev("img");

        if(currentImageIndex === 0){
            prev = $(images.get(count-1));
            prevImageIndex = images.index(prev);
        }

        if(prevImageIndex === (count - 1)) {
            // We have reached the end - start over.
            scrollapi.end(200);
        } else if ( (prevImageIndex + 1) % 4 === 0 ) {
            scrollapi.prev(200);
        }

        // Get the current image number
        var current = (prev.index("img"));

        var prevUrl = prev.attr("src").replace("t_", "");

        // get handle to element that wraps the image and make it semi-transparent
        var wrap = $("#image_wrap_galeria").fadeTo("medium", 0.5);
        var wrap2 = $("#mainim");

        // the large image from www.flickr.com
        var img = new Image();

        // call this function after it's loaded
        img.onload = function() {
            // make wrapper fully visible
            wrap.fadeTo("fast", 1);

            // change the image
            wrap.find("img").attr("src", prevUrl);
            wrap2.find("img").attr("src", prevUrl);
        };

        // begin loading the image from www.flickr.com
        img.src = prevUrl;

        $("#imageCounter").html((prevImageIndex + 1) +" of "+count);

        // activate item
        $(".items img").removeClass("active");
        prev.addClass("active");

    });
});


</script>

$（函数（）{
$（“.scrollable”）.scrollable（）；
var scrollapi=$（“.scrollable”）.data（'scrollable'）；
$（“.items img”）。单击（函数（）{
//查看是否单击了相同的拇指
if（$（this）.hasClass（“活动”）{return；}
//基于缩略图URL计算大图像的URL（特定于flickr）
var url=$（this.attr（“src”）.replace（“t_u”），“”）；
//获取包裹图像并使其半透明的元素的句柄
var wrap=$（“#image_wrap_galeria”）。fadeTo（“中等”，0.5）；
var wrap2=$（“#mainim”）；
//来自www.flickr.com的大图
var img=新图像（）；
//加载后调用此函数
img.onload=函数（）{
//使包装完全可见
包裹。法代托（“快速”，1）；
//更改图像
wrap.find（“img”）.attr（“src”，url）；
wrap2.find（“img”）.attr（“src”，url）；
};
//开始从www.flickr.com加载图像
img.src=url；
//激活项目
$（“.items img”）.removeClass（“活动”）；
$（此）.addClass（“活动”）；
//当页面加载时，模拟“单击”第一个图像
}).filter（“：first”）。单击（）；
$（“img[rel]”）叠加({
//一些适合模态对话框的掩码调整
遮罩：{
颜色：“#ebecff”，
装载速度：200，
不透明度：0.9
},
closeOnClick：没错，
onBeforeLoad:function（）{
变量项=$（'.items'），
计数=项目。查找（“img”）。长度，
当前=项。查找（'.active'），
currentIndex=当前索引（“img”）；
$（“#imageCounter”）.html（currentIndex+”of“+count）；
}
});
//下一个BTN
$（“.nextImg”）。单击（函数（）{
//统计所有图像
变量项=$（'.items'），
images=items.find（'img'），
count=images.length，
currentImage=items.find（'.active'），
currentImageIndex=images.index（currentImage），
next=$（images.get（currentImageIndex+1）），
nextImageIndex=images.index（下一个）；
如果（currentImageIndex==（计数-1））{
next=$（images.get（0））；
nextImageIndex=images.index（下一个）；
}
if（nextImageIndex==0）{
scrollapi.begin（200）；
}else if（nextImageIndex%4==0&&nextImageIndex>0）{
scrollapi.next（200）；
}
//获取当前图像编号
当前风险值=$（下一个指数（“img”）；
var nextUrl=next.attr（“src”）.replace（“t_u”），“”；
//获取包裹图像并使其半透明的元素的句柄
var wrap=$（“#image_wrap_galeria”）。fadeTo（“中等”，0.5）；
var wrap2=$（“#mainim”）；
//来自www.flickr.com的大图
var img=新图像（）；
//加载后调用此函数
img.onload=函数（）{
//使包装完全可见
包裹。法代托（“快速”，1）；
//更改图像
wrap.find（“img”）.attr（“src”，nextUrl）；
wrap2.find（“img”）.attr（“src”，nextUrl）；
};
//开始从www.flickr.com加载图像
img.src=nextUrl；
$（“#imageCounter”）.html（（nextImageIndex+1）+“of”+count）；
//激活项目
$（“.items img”）.removeClass（“活动”）；
next.addClass（“活动”）；
});
//上一个BTN
$（“.prevImg”）。单击（函数（）{
//统计所有图像
变量项=$（'.items'），
images=items.find（'img'），
count=images.length，
currentImage=items.find（'.active'），
currentImageIndex=images.index（currentImage），
prev=$（images.get（currentImageIndex-1）），
prevImageIndex=images.index（prev）；
//var prev=$（“.items”）.find（“.active”）.prev（“img”）；
如果（currentImageIndex==0）{
prev=$（images.get（count-1））；
prevImageIndex=images.index（prev）；
}
if（prevImageIndex==（计数-1））{
//我们已经到达终点——重新开始。
完(200),；
}否则如果（（prevImageIndex+1）%4==0）{
scrollapi.prev（200）；
}
//获取当前图像编号
当前风险值=（上一指数（“img”）；
var prevUrl=prev.attr（“src”）.replace（“t_”）和“）；
//获取包裹图像并使其半透明的元素的句柄
var wrap=$（“#image_wrap_galeria”）。fadeTo（“中等”，0.5）；
var wrap2=$（“#mainim”）；
//来自www.flickr.com的大图
var img=新图像（）；
//加载后调用此函数
img.onload=函数（）{
//使包装完全可见
包裹。法代托（“快速”，1）；
//更改图像
wrap.find（“img”）.attr（“src”，prevUrl）；
wrap2.find（“img”）.attr（“src”，prevUrl）；
};
//开始从www.flickr.com加载图像
img.src=prevUrl；
$（“#imageCounter”）.html（（prevImageIndex+1）+“of”+count）；
//激活项目
$（“.items img”）.removeClass（“活动”）；
上一个添加类（“活动”）；
});
});

这里的计数器是哪个变量？变量是div中有多少个图像，称为.items。。。。在JSFIDLE中，您可以测试它，当您覆盖图像时，有一个计数器，工作正常。。。。当我将其集成到我提到的脚本中时。。计数器开始做一些奇怪的事情，转到第二个拇指，然后覆盖或最大化主图像，您将看到错误