Javascript不会影响所选外部类的所有元素

我正在尝试运行一个幻灯片脚本，该脚本在类为

.featured

的所有元素上运行，但它仅在callout类的最后一个对象上运行。似乎幻灯片正在加载每个div的图像，但将它们加载到同一个div中。以下是我的脚本：

var images=新数组（'http://lorempixel.com/1000/600','http://lorempixel.com/1000/800','http://lorempixel.com/1000/660');
var-nextimage=0；
doSlideshow（）；
函数doSlideshow（）
{
如果（$（'.slideshowimage'）。长度！=0）
{
$（'.slideshowimage'）.fadeOut（300，函数（）{slideshowFadeIn（）；$（this.remove（）}）；
}
其他的
{
slideshowFadeIn（）；
}
}
函数slideshowFadeIn（）
{
$（'.featured'）.prepend（$（'.fadeIn（300，function（）{setTimeout（doSlideshow，6000）；}））；
if（nextimage>=images.length）
nextimage=0；
}

.tile{
背景色：rgba（255255.7）；
颜色：rgba（110185,43100）；
边缘顶端：10em；
最小高度：5em；
填充：0；
}
#主容器{
位置：相对位置；
z指数：300；
垫面：2米；
垫底：2米；
}
.窗户{
高度：40公分；
}
.打字机{
颜色：#888；
}
a型打字机{
颜色：rgba（55158196100）；
文字装饰：无；
}
.a型打字机：悬停{
文字装饰：无；
不透明度：.8；
过渡：所有300毫秒；
}
.打字机h1{
字体大小：5.5em；
页边距底部：1em；：
}
.打字机h3{
颜色：rgba（55158196100）；
边缘底部：.5em；
边缘顶部：.7em；
字号：1.4em；
}
.打字机文本区{
背景色：透明；
边界：无；
宽度：80%；
高度：7公分；
颜色：#888；
}
.typer文本区域：焦点{
盒影：rgba（110185,43100）0px 0px 20px；
边界：无；
大纲：无；
}
.打字机按钮{
颜色：#FFF；
背景色：rgba（55158196100）；
边界：无；
填充：.8em；
边缘顶部：.5em；
}
.打字机按钮h1{
字号：1em；
字母间距：.1米；
保证金：0；
}
.特色{
位置：相对位置；
填充：0；
颜色：#FFF；
溢出：隐藏；
}
.特色img{
位置：绝对位置；
宽度：100%；
}
.特色蓝色{
背景色：rgba（55158196100）；
不透明度：.6；
宽度：100%；
身高：100%；
位置：绝对位置；
z指数：100；
}
.特色h1{
边缘顶部：8em；
字体系列：“Museo Sans Rounded”无衬线；
字号：500；
字号：4em；
}
.专题文章{
边缘顶部：2米；
字号：1.5em；
线高：1.7em；
字体大小：300；
}
.p.strong{
字体大小：1.3em；
字母间距：.09em；
}
.特色按钮{
颜色：rgba（55158196100）；
背景色：#FFFFFF；
边界：无；
填充：.8em；
边缘顶部：2米；
}
.特色按钮h1{
字号：1em；
字母间距：.8em；
保证金：0；
}

精选

在世界的家里
测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试。
阅读更多
精选

在世界的家里
测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试。
阅读更多

第一件事：您的代码中有一个巨大的bug。即使在添加了第一个元素之后，也会不断向页面添加新的图像元素。这意味着您的页面将不断膨胀，直到出现内存泄漏

你在这件事上走错了路。您正在使用Javascript编辑DOM，这是Web设计的一大失误，除非您有很好的理由这样做。相反，您应该在HTML中创建2个图像标记，并使用Javascript分配src属性值并进行淡入淡出

---

我现在太累了，无法调试您的代码并制作一个工作示例。我建议你先自己尝试一下，如果你在解决这个问题上需要任何帮助，请提出一个新问题。

这是我的新脚本。我以前做过这个，所以我不知道为什么我不重用这个脚本。它仍然只影响最后一个，而不是两个。我只会使用插件，但我会不惜一切代价避免使用插件。我想开始摆脱使用他人代码的习惯，并能够自己编写代码

$(function () {
var Featured = $('.featured');
var backgrounds = [
    'url(url(http://lorempixel.com/1500/600))',
    'url(url(http://lorempixel.com/1500/600))',
    'url(url(http://lorempixel.com/1500/600))',
    'url(url(http://lorempixel.com/1500/600))',
    'url(url(http://lorempixel.com/1500/600))',
    'url(url(http://lorempixel.com/1500/600))',
    'url(url(http://lorempixel.com/1500/600))'];
var current = 0;

function nextBackground() {
    Featured.css(
        'background',
    backgrounds[current = ++current % backgrounds.length]);

    setTimeout(nextBackground, 5000);
}
setTimeout(nextBackground, 5000);
Featured.css('background', backgrounds[0]);

---

}))

您可以只执行

if（$（'.slideshowimage'）.length）

而不是

if（$（'.slideshowimage'）.length！=0）

因为您已经在使用jQuery，所以最好使用其中一个函数，而不是编写自己的函数。他们中的许多人都经过了很好的测试，会做你想做的事情。