Javascript 一页多个幻灯片：如何使箭头指向一组特定的幻灯片？

我正在尝试创建一个公文包网站，在同一页上包含多个图像滑块。我让HTML、CSS和jQuery在一个滑块上工作，但当我添加了另一个滑块（使用相同的类）时，事情就变得很奇怪了

我的问题：如何使左右箭头只指向它们所连接的幻灯片

潜在的修复方法：

-我是否需要重新组织HTML以使箭头与幻灯片成为同级？不过，它们已经包含在同一“投资组合项目”div中

-我需要在jQuery中使用“this”和/或“each”吗？我曾尝试在不同的位置使用“this”和“each”选择器，但运气不好。我对这方面还不熟悉，所以可能用错了

附加的代码正在工作，但箭头正在移动文档中的所有图像，而不仅仅是它们各自滑块上的图像

谢谢你的帮助

瑞安

var main=function（）{
$（'.slide:first child'）.fadeIn（600）.addClass（'active-slide'）；
//右箭头！
$（'.portfolio item.right arrow'）。单击（函数（）{
var currentSlide=$（'.active slide'）；
var nextSlide=currentSlide.next（）；
if（nextSlide.length==0）{
nextSlide=$（'.slide:first child'）；
}
currentSlide.fadeOut（600）.removeClass（'active-slide'）；
nextSlide.fadeIn（600）.addClass（'active-slide'）；
});
//左箭头！
$（'.portfolio item.left arrow'）。单击（函数（）{
var currentSlide=$（'.active slide'）；
var prevSlide=currentSlide.prev（）；
如果（prevSlide.length==0）{
prevSlide=$（'.slide:last child'）；
}
currentSlide.fadeOut（600）.removeClass（'active-slide'）；
prevsiled.fadeIn（600）.addClass（'active-slide'）；
});
}
$（文档）.ready（主）；

@charset“UTF-8”；
/*CSS文档*/
.滑块容器{
显示：块；
位置：相对位置；
宽度：100%；
最大宽度：600px；
背景色：黑色；
利润率：0%0%1%0%；
溢出：隐藏；
浮动：左；
}
.滑块{
位置：相对位置；
填充顶部：45%；
z指数：0；
}
幻灯片{
z指数：1；
列表样式类型：disc；
显示：块；
位置：绝对位置；
填充：0；
保证金：0；
排名：0；
左：0；
宽度：100%；
身高：100%；
}
.活动幻灯片{
显示：块；
保证金：0自动；
}
.幻灯片{
显示：无；
位置：绝对位置；
宽度：100%；
身高：100%；
转换：所有.2易入易出；
-moz转换：所有.2秒的输入输出；
-webkit转换：所有.2易入易出；
溢出：隐藏；
}
.幻灯片图像{
保证金：0；
位置：绝对位置；
宽度：100%；
z指数：2；
左：0；
}
.阿罗{
位置：绝对位置；
最高：42%；
宽度：5%；
不透明度：0.7；
转换：所有.2易入易出；
-moz转换：所有.2秒的输入输出；
-webkit转换：所有.2易入易出；
z指数：3；
}
.左箭头{
左：1%；
}
.右箭头{
右：1%；
}
.箭头：悬停{
不透明度：1；
光标：指针；
}
@介质（最大宽度：886px）{
.滑块容器{
最大宽度：无；
}

我认为您应该将使用jquery的地方上下文化，如下所示

var currentContext=$（this）.closest（'.slider container'）

因为现在，当您执行以下操作时：var currentSlide=$（'.active slide'）；实际上，这会选择两个活动滑块，您只想激活您单击的一个

var main=function（）{
$（'.slide:first child'）.fadeIn（600）.addClass（'active-slide'）；
//右箭头！
$（'.portfolio item.right arrow'）。单击（函数（）{
//这样可以保存上下文
var currentContext=$（this）.closest（'.slider container'）；
//这将选择上下文的活动幻灯片
var currentSlide=currentContext.find（'.active slide'）；
//var currentSlide=$（'.active slide'）；
var nextSlide=currentSlide.next（）；
if（nextSlide.length==0）{
//nextSlide=$（'.slide:first child'）；
//这将选择上下文的下一张幻灯片
nextSlide=currentContext.find（'.slide:first child'）；
}
currentSlide.fadeOut（600）.removeClass（'active-slide'）；
nextSlide.fadeIn（600）.addClass（'active-slide'）；
});
//左箭头！
$（'.portfolio item.left arrow'）。单击（函数（）{
//这样可以保存上下文
var currentContext=$（this）.closest（'.slider container'）；
//这将选择上下文的当前活动幻灯片
var currentSlide=currentContext.find（'.active slide'）；
//var currentSlide=$（'.active slide'）；
var prevSlide=currentSlide.prev（）；
如果（prevSlide.length==0）{
//prevSlide=$（'.slide:last child'）；
//这将选择上下文的上一张幻灯片
prevSlide=currentContext.find（'.slide:last child'）；
}
currentSlide.fadeOut（600）.removeClass（'active-slide'）；
prevsiled.fadeIn（600）.addClass（'active-slide'）；
});
}
$（文档）.ready（主）；

@charset“UTF-8”；
/*CSS文档*/
滑动