0

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

我正在制作一个带有缩略图的简单图片库，单击该缩略图可以更改正在显示的主图像。除此之外，我还添加了在缩略图集和较大图像之间滑动的箭头。

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

我无法弄清楚为什么会发生这种情况，有人可以帮忙吗？

下面的代码：

http://jsfiddle.net/ugPX7/

查询：

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();

});

提前致谢！

4

0 回答 0