Javascript jquery图像滑块fadeIn不工作

我正在根据本教程构建一个图像滑块

我无法获得fadeIn的第一张图像 我已经检查了几次代码，但看不出哪里出了问题。 这是我的密码

HTML

Javascript

var sliderInt=1;
var 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);
} 

---

下面是工作片段。你在找什么

var sliderInt=1，
sliderNext=2；
$（文档）.ready（函数（）{
$（“#slider>img#1”）.fadeIn（300）；
})

.wrapper{
宽度：600px；
保证金：0自动；
}
#滑块{
宽度：600px；
高度：400px；
溢出：隐藏；
保证金：30像素自动；
}
#滑块>img{
宽度：600px；
高度：400px；
浮动：左；
显示：无；
}
a{
填充物：5px10px；
背景色：#f0；
利润率最高：30；
文字装饰：无；
颜色：红色；
}
a、 左{
浮动：左；
}
a、 对{
浮动：对；
}

帮助开发| Jquery滑块

以下是工作片段。你在找什么

var sliderInt=1，
sliderNext=2；
$（文档）.ready（函数（）{
$（“#slider>img#1”）.fadeIn（300）；
})

.wrapper{
宽度：600px；
保证金：0自动；
}
#滑块{
宽度：600px；
高度：400px；
溢出：隐藏；
保证金：30像素自动；
}
#滑块>img{
宽度：600px；
高度：400px；
浮动：左；
显示：无；
}
a{
填充物：5px10px；
背景色：#f0；
利润率最高：30；
文字装饰：无；
颜色：红色；
}
a、 左{
浮动：左；
}
a、 对{
浮动：对；
}

帮助开发| Jquery滑块

您在代码中添加了

}代替
}）


var sliderInt=1；
var sliderNext=2；
$（文档）.ready（函数（）{
$（“#slider>img#1”）.fadeIn（300）；
startSlider（）
});
函数startSlider（）{
计数=$（“#滑块>img”）。长度；
循环=设置间隔（函数（）{
如果（sliderNext>count）{
sliderNext=1；
滑块=1；
}			
$（“#滑块>img”）.fadeOut（300）；
$（“#slider>img#”+sliderNext）.fadeIn（300）；
sliderInt=sliderNext；
sliderNext=sliderNext+1；
}, 3000);
}
.wrapper{
宽度：600px；
保证金：0自动；
}
#滑块{
宽度：600px；
高度：400px；
溢出：隐藏；
保证金：30像素自动；
}
#滑块>img{
宽度：600px；
高度：400px；
浮动：左；
显示：无；
}
a{
填充物：5px10px；
背景色：#f0；
利润率最高：30；
文字装饰：无；
颜色：红色；
}
a、 左{
浮动：左；
}
a、 对{
浮动：对；
}

帮助开发| Jquery滑块
您在代码中添加了
}代替
}）


var sliderInt=1；
var sliderNext=2；
$（文档）.ready（函数（）{
$（“#slider>img#1”）.fadeIn（300）；
startSlider（）
});
函数startSlider（）{
计数=$（“#滑块>img”）。长度；
循环=设置间隔（函数（）{
如果（sliderNext>count）{
sliderNext=1；
滑块=1；
}			
$（“#滑块>img”）.fadeOut（300）；
$（“#slider>img#”+sliderNext）.fadeIn（300）；
sliderInt=sliderNext；
sliderNext=sliderNext+1；
}, 3000);
}
.wrapper{
宽度：600px；
保证金：0自动；
}
#滑块{
宽度：600px；
高度：400px；
溢出：隐藏；
保证金：30像素自动；
}
#滑块>img{
宽度：600px；
高度：400px；
浮动：左；
显示：无；
}
a{
填充物：5px10px；
背景色：#f0；
利润率最高：30；
文字装饰：无；
颜色：红色；
}
a、 左{
浮动：左；
}
a、 对{
浮动：对；
}

帮助开发| Jquery滑块
我运行了你发布的代码，但仍然没有弹出图像我发现了问题我运行了你发布的代码，仍然没有弹出图像我发现了问题检查我的答案，如果你在某个地方卡住了，只需更新问题循环没有正常工作。图1出现了，但它没有循环到rest。我想您没有看到我在回答中实现的代码，请运行并查看。在您的代码中，如果（sliderNext>count）{sliderNext=1；slidernit=1；}
新代码在我的问题中，您忘记在setInterval
中重置。我添加了你建议的if语句。仍然没有改变。这一切都很好，可能是缓存问题。尝试在匿名窗口中运行代码检查我的答案，如果你在某个地方卡住了，只需更新问题，循环就不能正常工作。图1出现了，但它没有循环到rest。我想您没有看到我在回答中实现的代码，请运行并查看。在您的代码中，如果（sliderNext>count）{sliderNext=1；slidernit=1；}
新代码在我的问题中，您忘记在setInterval
中重置。我添加了你建议的if语句。仍然没有改变。这一切都很好，可能是缓存问题。尝试在“匿名”窗口中运行代码
    .wrapper{
        width: 600px;
        margin: 0 auto;
    }

    #slider {
        width:600px;
        height:400px;
        overflow:hidden;
        margin:30px auto;
    }
    #slider > img{
        width: 600px;
        height:400px;
        float:left;
        display:none;
    }

    a {
        padding:5px 10px;
        background-color:#F0F0F0;
        margin-top:30;
        text-decoration: none;
        color: red;

    }

    a.left{
        float:left;
    }

    a.right{
        float:right;
    }

var sliderInt=1;
var 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);
}