Javascript jQuery和CSS-在滑块中图像相互后面，如何重复我的功能？

我试图建立一个简单的滑块，但我卡住了

我希望图像放置在彼此后面，但没有位置：绝对，因为图像将忽略容器的最大宽度

第二，如何重复我的函数slideplay

$（文档）.ready（函数（）{
变量img1=$（“.image holder img:第一个孩子”）；
var img2=$（“.图像支架img:n类型（2）”）；
变量img3=$（“.图像支架img:n类型（3）”）；
var img4=$（“.imageholder img:nth of type（4）”）；
/*var img1_child=$（“.image holder small img:first child”）；
var img2_child=$（“.图像支架小img:n类型（2）”）；
var img3_child=$（“.图像支架小img:n类型（3）”）；
var img4_child=$（“.image holder small img:nth of type（4）”）*/
var图像=[img1、img2、img3、img4]；
var repeat=true；
功能滑块播放（a、b、c、d）{
img1.fadeTo（'slow'，1）；
img1.延迟（5000）。fadeTo（'slow'，0）；
img2.延迟（5000）。fadeTo（'slow'，1）；
img2.延迟（5000）。fadeTo（'slow'，0）；
img3.延迟（10000）。fadeTo（'slow'，1）；
img3.延迟（5000）。fadeTo（'slow'，0）；
img4.延迟（15000）。fadeTo（'slow'，1）；
img4.延迟（5000）。fadeTo（'slow'，0）；
}
滑块播放（img1、img2、img3、img4）；
});
。幻灯片{
利润率：50像素；
}
/*要点*/
.要点a{
字体大小：25px；
颜色：黑色；
文字装饰：无；
}
/*大图*/
.图像支架{
宽度：300px；
高度：300px；
}
.图像支架{
宽度：100%；
身高：100%；
对象匹配：覆盖；
}
您的css可以通过以下方式修复：

.image-holder {
  width: 300px;
  height: 300px;
  position:relative;
}

.image-holder img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  position:absolute;
}

您的循环可以通过以下方式创建：

setInterval(function () {
  sliderplay(img1, img2, img3, img4);
}, 1000);

你可以玩玩它


$（文档）.ready（函数（）{
变量img1=$（“.image holder img:第一个孩子”）；
var img2=$（“.图像支架img:n类型（2）”）；
变量img3=$（“.图像支架img:n类型（3）”）；
var img4=$（“.imageholder img:nth of type（4）”）；
/*var img1_child=$（“.image holder small img:first child”）；
var img2_child=$（“.图像支架小img:n类型（2）”）；
var img3_child=$（“.图像支架小img:n类型（3）”）；
var img4_child=$（“.image holder small img:nth of type（4）”）*/
var图像=[img1、img2、img3、img4]；
var repeat=true；
功能滑块播放（a、b、c、d）{
img1.fadeTo（'slow'，1）；
img1.延迟（5000）。fadeTo（'slow'，0）；
img2.延迟（5000）。fadeTo（'slow'，1）；
img2.延迟（5000）。fadeTo（'slow'，0）；
img3.延迟（10000）。fadeTo（'slow'，1）；
img3.延迟（5000）。fadeTo（'slow'，0）；
img4.延迟（15000）。fadeTo（'slow'，1）；
img4.延迟（5000）。fadeTo（'slow'，0）；
}
setInterval（函数（）{
滑块播放（img1、img2、img3、img4）；
}, 1000);
});
。幻灯片{
利润率：50像素；
}
/*要点*/
.要点a{
字体大小：25px；
颜色：黑色；
文字装饰：无；
}
/*大图*/
.图像支架{
宽度：300px；
高度：300px；
位置：相对位置；
}
.图像支架{
宽度：100%；
身高：100%；
对象匹配：覆盖；
位置：绝对位置；
}

谢谢！你也知道我如何循环我的sliderplay函数吗？我也在努力，谢谢你。我扩展了我的滑块，并在右侧添加了一些文本，这些文本也应该与滑块图像一起更改。不确定在循环函数时这是否相关。现在看一看。我的坏消息是它打乱了一些时间安排。看起来有点奇怪。但是，如果你可能设置了正确的时间，它应该会起作用。希望这至少有一点帮助