javascript - 我的 JavaScript 图片库 slider 的右侧 slider 无法正常工作，而左侧的 slider 可以正常工作

Question

我的个人网站上有一个图片库 slider (您可以在此处查看视觉效果: http://www.alexmarvick.com/gallery.html )，使用以下 HTML 和 Javascript 编写:

HTML(使用 fontawesome 图标，图像位于我的目录中)

    <section class="body-home" id="body-gallery">
        <div id="gallery-outline">
            <img id="gallery-enlarged-image" src="image1.jpg">
            <p id="caption">Study Abroad Trip in 2014: Weekend Trip to Paris, France. Missing it! February 2014</p>
            <div id="gallery-scroll-selectors">
                <i class="fa fa-arrow-circle-left" id="left-arrow" aria-hidden="true"></i>
                <i class="fa fa-arrow-circle-right" id="right-arrow" aria-hidden="true"></i>
            </div>

            <div id="gallery-image-options-outline">
                <li><img class="small-images" id="1" src="image1.jpg"></li>
                <li><img class="small-images" id="2" src="image2.jpg"></li>
                <li><img class="small-images" id="3" src="image3.jpg"></li>
                <li><img class="small-images" id="4" src="image4.jpg"></li>
                <li><img class="small-images" id="5" src="image5.jpg"></li>
                <li><img class="small-images" id="6" src="image6.jpg"></li>
                <li><img class="small-images" id="7" src="image7.jpg"></li>
                <li><img class="small-images" id="8" src="image8.jpg"></li>
                <li><img class="small-images" id="9" src="image9.jpg"></li>
            </div>
        </div>
    </section>

JavaScript

var caption = "";
var imageNo = 1;

var photoChange = function() {

    if (imageNo == 0) {
        imageNo = 1;
        caption = "Study Abroad Trip in 2014: Weekend Trip to Paris, France. Missing it! February 2014";
        $('#gallery-enlarged-image').attr("src", "image" + imageNo + ".jpg");
    }

    else if (imageNo == 10) {
        imageNo = 9;
        caption = "Standing out in front of Microsoft's campus, taken by a friend. August 2015";
        $('#gallery-enlarged-image').attr("src", "image" + imageNo + ".jpg");
    }

    else if (imageNo == 1) {
        caption = "Study Abroad Trip in Spring 2014: Weekend Trip to Paris, France. Missing it! February 2014";
    }

    else if (imageNo == 2) {
        caption = "Our cat, Cosmo";
    }

    else if (imageNo == 3) {
        caption = "Gonzaga University Graduation, May 2016";
    }

    else if (imageNo == 4) {
        caption = "Gonzaga University Graduation Picture 2, May 2016";
    }

    else if (imageNo == 5) {
        caption = "Me with my parents in Burch Bay, WA. June 2016";
    }

    else if (imageNo == 6) {
        caption = "Me striking a pose with my Senior Design Project. April 2016";
    }

    else if (imageNo == 7) {
        caption = "Our cat, Rudy";
    }

    else if (imageNo == 8) {
        caption = "At the Orleans arena in Vegas watching Gonzaga Basketball take the WCC title. March 2016";
    }

    else if (imageNo == 9) {
        caption = "Standing out in front of Microsoft's campus, taken by a friend. August 2015";
    }

    else {
        caption = "No Image Here Yet";
    }

    $('#caption').html(caption);

};

$('#gallery-enlarged-image').hide();
$('#gallery-enlarged-image').fadeIn(500);

$('.small-images').click(function() {

    var bigImageSrc = $(this).attr("src");
    $('#gallery-enlarged-image').attr("src", bigImageSrc);

    imageNo = $(this).attr("id");

    $('#gallery-enlarged-image').hide();
    $('#gallery-enlarged-image').fadeIn(500);

    photoChange();

});

$('#left-arrow').click(function() {

    $('#gallery-enlarged-image').hide();

    imageNo -= 1;

    $('#gallery-enlarged-image').attr("src", "image" + imageNo + ".jpg");
    $('#gallery-enlarged-image').fadeIn(500);

    photoChange();

});

$('#right-arrow').click(function() {

    $('#gallery-enlarged-image').hide();

    imageNo += 1;

    $('#gallery-enlarged-image').attr("src", "image" + imageNo + ".jpg");
    $('#gallery-enlarged-image').fadeIn(500);

    photoChange();

});

当您第一次加载网站时，左右按钮可以正常工作。但是，当您单击下面图库中的任何随机图像时，右箭头就会失效，但左箭头仍然可以正常工作。当我打开控制台时，我会收到一条错误消息:

“image71.jpg:1 GET http://www.alexmarvick.com/image71.jpg 404(未找到)”

似乎存在解析问题，因为当激活 '#right-arrow'.click 函数时，imageNo 表现为字符串(在本例中，我单击了第 7 个图像，然后一旦单击它在其末尾解析了右箭头“1”，而不是将其添加到等于 8)。但是，它不会使用向左箭头执行此操作，并且左侧和右侧的代码是相同的。

Answer 1

尝试

imageNo = parseInt(imageNo) + 1;

而不是

imageNo += 1;

在您的 $('#right-arrow').click() 处理程序中。

问题在于 imageNo 是一个字符串，而您尝试将其用作 int。

编辑:或者(我认为更好的选择)你可以更改行

imageNo = $(this).attr("id");

至:

imageNo = parseInt($(this).attr("id"));

来自 $('.small-images').click() 处理程序。