Javascript 单击最后一张幻灯片上的“下一步”结束幻灯片放映

我一直在使用javascript/jquery处理我的第一个滑块，滑块本身也在工作，除非当我在最后一张图像上时，如果我单击“下一步”，它会出现空白并停止。如果我让它变得有趣，它会自行循环，然后返回到第一张幻灯片。我尝试过制作一个JSFIDLE，但由于某些原因，我根本无法让它在FIDLE中工作，所以他们的启动过程可能有问题，我不确定。它在我的本地站点上运行良好，除了在最后一张幻灯片上单击“下一步”按钮时不再工作的问题

HTML5

JavaScript

sliderInt = 1;
sliderNext = 2;

$(document).ready(function(){
    $('#slider > img#1').fadeIn(300)
    startSlider();
});

function startSlider(){
    count = $('#slider > img').size();

    loop = setInterval(function(){

        if(sliderNext > count){
            sliderNext = 1;
            sliderInt = 1;
        }

        $('#slider > img').fadeOut(300);
        $('#slider > img#' + sliderNext).fadeIn(300);

        sliderInt = sliderNext;
        sliderNext = sliderNext + 1;

    }, 3000)
}

function prev() {
    newSlide = sliderInt - 1;
    showSlide(newSlide);
}

function next() {
    newSlide = sliderInt + 1;
    showSlide(newSlide);
}

function stopLoop() {
    window.clearInterval(loop);
}

function showSlide(Id) {
    stopLoop();
    if(Id > count){
            sliderNext = 1;
            sliderInt = 1;
        }

        else if(Id < 1){
            Id = count;
        }

        $('#slider > img').fadeOut(300);
        $('#slider >img#' + Id).fadeIn(300);

        sliderInt = Id;
        sliderNext = Id + 1;
        startSlider();
}

$('#slider > img').hover(
    function() {
        stopLoop();
    },
    function(){
        startSlider();
    }
);

sliderInt=1；
sliderNext=2；
$（文档）.ready（函数（）{
$（'#slider>img#1'）.fadeIn（300）
startSlider（）；
});
函数startSlider（）{
count=$（'#slider>img'）。size（）；
循环=设置间隔（函数（）{
如果（sliderNext>count）{
sliderNext=1；
滑块=1；
}
$（'#slider>img'）。淡出（300）；
$（'#slider>img#'+sliderNext）.fadeIn（300）；
sliderInt=sliderNext；
sliderNext=sliderNext+1；
}, 3000)
}
函数prev（）{
newSlide=slident-1；
放映幻灯片（新闻幻灯片）；
}
函数next（）{
newSlide=slident+1；
放映幻灯片（新闻幻灯片）；
}
函数stopLoop（）{
清除间隔（循环）；
}
功能演示幻灯片（Id）{
stopLoop（）；
如果（Id>计数）{
sliderNext=1；
滑块=1；
}
else if（Id<1）{
Id=计数；
}
$（'#slider>img'）。淡出（300）；
$（'#slider>img#'+Id）.fadeIn（300）；
sliderInt=Id；
sliderNext=Id+1；
startSlider（）；
}
$（“#滑块>img”）。悬停(
函数（）{
stopLoop（）；
},
函数（）{
startSlider（）；
}
);

问题在于

showsiled（）

函数中的if-else语句。应该是：

if (Id > count) {
    Id = 1;
} else if (Id < 1) {
    Id = count;
}

if（Id>count）{
Id=1；
}else if（Id<1）{
Id=计数；
}

---

顺便说一句：我想你可以简化你的HTML和JQuery代码如下：

这里有一个用于你的代码的方法。哦，谢谢，由于某种原因，我通常无法让它工作。是的，这就是问题所在，这是你为简化我的HTML和JQuery而展示的一个非常酷的技巧。我是一名网络开发新手，所以我正在努力学习如何编写更短、更有效的代码。特别是在HTML方面，似乎没有太多关于更好的HTML编码的信息。如果您对该代码有任何疑问，请在此答案上留下评论。

sliderInt = 1;
sliderNext = 2;

$(document).ready(function(){
    $('#slider > img#1').fadeIn(300)
    startSlider();
});

function startSlider(){
    count = $('#slider > img').size();

    loop = setInterval(function(){

        if(sliderNext > count){
            sliderNext = 1;
            sliderInt = 1;
        }

        $('#slider > img').fadeOut(300);
        $('#slider > img#' + sliderNext).fadeIn(300);

        sliderInt = sliderNext;
        sliderNext = sliderNext + 1;

    }, 3000)
}

function prev() {
    newSlide = sliderInt - 1;
    showSlide(newSlide);
}

function next() {
    newSlide = sliderInt + 1;
    showSlide(newSlide);
}

function stopLoop() {
    window.clearInterval(loop);
}

function showSlide(Id) {
    stopLoop();
    if(Id > count){
            sliderNext = 1;
            sliderInt = 1;
        }

        else if(Id < 1){
            Id = count;
        }

        $('#slider > img').fadeOut(300);
        $('#slider >img#' + Id).fadeIn(300);

        sliderInt = Id;
        sliderNext = Id + 1;
        startSlider();
}

$('#slider > img').hover(
    function() {
        stopLoop();
    },
    function(){
        startSlider();
    }
);

if (Id > count) {
    Id = 1;
} else if (Id < 1) {
    Id = count;
}