我正试图用jQuery制作一个滑块，但实际上我不知道是什么导致了错误。
我对这种语言很陌生，我正在学习，所以是的，我的代码可能看起来很愚蠢：D
好吧，所以基本上我有五个图像：1，2，3，4和5，下面是我的代码：
HTML:
<html>
...
<section id="image_slider">
<div id="trapezoid"></div> <!-- I'll explain that div below :P -->
<img class="image" id="img1" src="1.png" alt="1"></img>
<img class="image" id="img2" src="2.png" alt="2"></img>
<img class="image" id="img3" src="3.png" alt="3"></img>
<img class="image" id="img4" src="4.png" alt="4"></img>
<img class="image" id="img5" src="5.png" alt="5"></img>
</section>
...
</html>
CSS：
<CSS>
#image_slider {
height:500px;
/*
background-image: url("1.png");
background-image: url("2.png");
background-image: url("3.png");
background-image: url("4.png");
background-image: url("5.png");
*/
}
/*
#trapezoid
{
border-bottom: 500px solid #555;
border-left: 0px solid transparent;
border-right: 125px solid transparent;
height: 0;
width: 500px;
position:absolute;
}
*/
.image {
vertical-align:top;
position:absolute;
}
</CSS>
JAVASCRIPT:
<script type="text/javascript">
var i=0;
setTimeout(function(){
i++;
if(i=0)
{
$(".image").not("img1").hide();
}
else if(i=1)
{
$(".image").not("img2").hide();
}
else if(i=2)
{
$(".image").not("img3").hide();
}
else if(i=3)
{
$(".image").not("img4").hide();
}
else if(i=4)
{
$(".image").not("img5").hide();
}
else if(i=5)
{
i=-1;
}
}2000);
});
</script>
好吧，所以从一开始：我正在考虑两种方式，我希望滑块看起来像什么。
第一个也是最初的一个，在这种情况下，我想制作一个滑块，图像将从右向左移动，我也想在这个滑块上有一个梯形，这就是为什么有一个id为"的div；"梯形"；，但当我在html文档中实现图像时，这似乎是不可能的，因为图像不想让这个梯形覆盖它们，当我在样式表中实现这些图像作为背景图像时，它有点起作用，是的，但对我来说，不可能动画化5个背景图像，这样看起来会很好看。
最后，请帮助我使用jQuery代码，使滑块以这种方式工作：每5秒，图像就会向左滑动。旧的一个通过向左移动而消失，而新的一个则通过向左移动来出现。(新的应该在旧的后面(。
此外，请解释为什么我的jQuery代码不起作用，我的意思是，我知道jQuery中有一些循环，比如while、for等等，但它们也不起作用。我不知道为什么循环没有每2秒重复一次。。。
最简单的代码、开关和幻灯片图像版本。如果你愿意，你可以在这方面努力并改进。
$(document).ready(function () {
let intrvl = 3000;
var i = 0;
$(".image").hide();
setInterval(function () {
i++;
$(".image").hide();
$("#img" + i).show();
$("#img" + i).css("left", "300px");
$("#img" + i).animate(
{
"left": "0px"
}, intrvl);
if (i >= 5) {
i = 0;
}
}, intrvl);
});.image {
position: fixed
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<section id="image_slider">
<div id="trapezoid"></div> <!-- I'll explain that div below :P -->
<img class="image" id="img1" height="200" src="images/1.jpg" alt="1" />
<img class="image" id="img2" height="200" src="images/2.jpg" alt="2" />
<img class="image" id="img3" height="200" src="images/3.jpg" alt="3" />
<img class="image" id="img4" height="200" src="images/4.jpg" alt="4" />
<img class="image" id="img5" height="200" src="images/5.jpg" alt="5" />
</section>好吧，这里是我编辑过的Alwaysa Learner的代码：
<script type="text/javascript">
$(document).ready(function () {
let intrvl = 3000;
var i = 0;
var d = 1;
$(".image").not("#img1").hide();
setInterval(function () {
i++;
d++;
$(".image").hide();
$("#img" + i).show();
$("#img" + i).css("opacity", "1.0");
$("#img" + i).animate(
{
"opacity": "0"
}, intrvl);
$("#img" + d).show();
$("#img" + d).css("opacity", "0");
$("#img" + d).animate(
{
"opacity": "1.0"
}, intrvl);
if (i >= 5) {
i = 0;
}
if (d >=6) {
d = 1;
$(".image").hide();
$("#img5").show();
$("#img5").css("opacity", "1.0");
$("#img5").animate(
{
"opacity": "0"
}, intrvl);
$("#img1").show();
$("#img1").css("opacity", "0");
$("#img1").animate(
{
"opacity": "1.0"
}, intrvl);
}
}, intrvl);
});
</script>
滑块本身工作非常出色。但我想尝试在不断变化的图像上添加这个梯形：
CSS：
#trapezoid {
border-bottom: 500px solid #555;
border-left: 0px solid transparent;
border-right: 125px solid transparent;
height: 0;
width: 500px;
}
问题是当图像的位置被设置为"0"时；位置：固定；它们显示在梯形形状的上方，我想在梯形形状上添加类似"；img1"img2"img3"；等
我还尝试过设置位置：从绝对到梯形，并删除class.image的位置设置，但没有成功。
所以我的问题是：当图像出现时，有可能使这个梯形形状显示在图像上方吗；由于上面的jquery代码而隐藏？或者我应该…不。。。例如，用GIMP在图像本身上添加梯形形状？但它会以负面的方式影响梯形和段落的不透明性，不是吗？