Javascript 使用jquery和attr（）在img之间切换

我真的不明白它渲染的第一个图像是怎么回事，它做了fadeIn和fadeOut，这是错误的

如果有人能向我解释我做错了什么，我将不胜感激

$（文档）.ready（函数（）{
变量$text01=$（“#text1”）；
变量$text02=$（“#text2”）；
变量$text03=$（“#text3”）；
变量$text04=$（“#text4”）；
var$imgController=$（“img控制器”）；
var images=['https://imagizer.imageshack.us/v2/927x637q90/913/D4xyiG.jpg', 'https://imagizer.imageshack.us/v2/333x250q90/673/qVKDU3.jpg']
对于（var i=0；i

正文{
颜色：白色；
}
.bg{
位置：固定！重要；
位置：绝对位置；
排名：0；
右：0；
底部：0；
左：0；
img{
宽度：100%；
身高：100%；
}
#文本1{
位置：绝对位置；
最高：35%；
左：25%；
字号：10em；
颜色：绿色；
p{
文本阴影：2px0px4pxRGBA（1501501）；
-webkit文本笔划：1px$原色；
}
}
#文本2{
@扩展#text1；
}
#文本3{
@扩展#text1；
}
#文本4{
@扩展#text1；
}
}
.集装箱fluido{
位置：绝对位置；
宽度：60%；
顶部：20px；
左：20%；
填充：30px；
填充底部：0；
填充顶部：10px；
背景色：$secondary color；
@包括不透明度（0.7）；
}
.img标志{
宽度：200px；
高度：自动；
浮动：左；
光标：指针；
}
.img背景{
宽度：100%；
高度：自动；
}
.菜单{
宽度：100%；
填充顶部：30px；
李{
列表样式类型：无；
显示：内联；
左侧填充：40px；
a{
文字装饰：无；
过渡：边界底部线性0.5s；
颜色：$原色；
垫底：10px；
}
a:悬停{
边框底部：1px纯色绿色；
}
}
李：第一个孩子{
左：20%；
}
}
原色：白色；
$secondary color:#2A2A；
$INGISIO green:#B7C630

安东内洛

多纳泰罗

波提切利

伽利略











这可能会有所帮助

images.forEach(function(el, index, arr) {
 $imgController.attr('src', images[i]).fadeOut(4000, function(){
    $imgController.attr('src', images[i+1]).fadeIn(4000)
 });
});

这可能是一个假设，但您是否在寻找一个循环？图像保持不变的原因是foreach在第一次淡出之前运行，会立即主动更改为阵列中的最新图像。您可以使用setInterval使其无限循环：

var i = 1;
setInterval(function(){
    $imgController.fadeOut(2000, function(){
        $imgController.attr('src', images[i]).fadeIn(2000, function(){
            i++;
            if(i > (images.length - 1)){
                i = 0;
            }
        });
    });
}, 6000);

以下是一个例子：

让我知道，如果我的方式偏离基地与你想要这个循环。希望这有帮助
 您需要使用淡出的回调函数。
fadeOut
。您需要解释或使用已经运行良好的代码？？使用.prop（）而不是.attr（）保持最新状态，以避免以后出现迁移问题。没问题。别忘了标出正确的答案。谢谢