Question

我正在玩JQuery（我非常初学者），我遇到了一个问题。

我正在创建一个带缩略图的简单图库，点击这些图库后，更改正在显示的主图像。与此同时，我添加了箭头以在两组缩略图和较大的图像之间滑动。

所有脚本都单独工作，滑动箭头脚本协同工作，但每当我将所有三个脚本一起使用时，图像更换器最初工作，然后在您使用其他脚本之一时立即停止工作。

我无法弄清楚为什么会这样，有人能帮忙吗？

以下代码：

JQuery的：

function thumbClick() {
/*$('#gallery img').click(function() {
    var imgSrc = $(this).attr('src').replace('thumbs/','')
    $('#largeImage').fadeOut(750, function(){
          $(this).attr('src',imgSrc).bind('onreadystatechange load', function(){
             if (this.complete) $(this).fadeIn(750);
          });  
    });
});*/

$("#gallery img").click(function () {
    var imgSrc = $(this).attr("src").replace('thumbs/', '');
    $("#largeImage").attr("src", imgSrc);
});
}


function thumbGallery() {
if ($("#gallery").length) {

    // Declare variables
    var totalImages = $("#gallery > li").length,
        imageWidth = $("#gallery > li:first").outerWidth(true),
        totalWidth = imageWidth * totalImages,
        visibleImages = Math.round($("#gallery-wrap").width() / imageWidth),
        visibleWidth = visibleImages * imageWidth,
        stopPosition = (visibleWidth - totalWidth);

    // Set gallery to width of all images    
    $("#gallery").width(totalWidth);

    // Navigation buttons   
    $("#gallery-prev").click(function (event) {
        if ($("#gallery").position().left < 0 && !$("#gallery").is(":animated")) {
            $("#gallery").animate({
                left: "+=" + imageWidth * 2 + "px"
            }, 1000);
        }
        event.preventDefault();
    });

    $("#gallery-next").click(function (event) {
        if ($("#gallery").position().left > stopPosition && !$("#gallery").is(":animated")) {
            $("#gallery").animate({
                left: "-=" + imageWidth * 2 + "px"
            }, 1000);
        }
        event.preventDefault();
    });
}
}

function mainGallery() {
if ($("#panel").length) {

    // Declare variables
    var totalI = $("#panel > li").length,
        imageW = $("#panel > li:first").outerWidth(true),
        totalW = imageW * totalI,
        visibleI = Math.round($("#panel-wrap").width() / imageW),
        visibleW = visibleI * imageW,
        stopP = (visibleW - totalW);

    // Set gallery to width of all images    
    $("#panel").width(totalW);

    // Navigation buttons   
    $("#panel-prev").click(function (event) {
        if ($("#panel").position().left < 0 && !$("#panel").is(":animated")) {
            $("#panel").animate({
                left: "+=" + imageW + "px"
            }, 1000);
        }
        event.preventDefault();
    });

    $("#panel-next").click(function (event) {
        if ($("#panel").position().left > stopP && !$("#panel").is(":animated")) {
            $("#panel").animate({
                left: "-=" + imageW + "px"
            }, 1000);
        }
        event.preventDefault();
    });
}
}

$(document).ready(function () {
    thumbClick();
    mainGallery();
    thumbGallery();

});

提前致谢！

使用多个脚本时，JQuery Image changer停止工作

0 个答案: