带有jquery的图片幻灯片库，如何做到这一点？
Posted
技术标签:
【中文标题】带有jquery的图片幻灯片库，如何做到这一点？【英文标题】：Image slide gallery with jquery, how to do this? 【发布时间】：2020-11-18 10:15:49 【问题描述】：我正在尝试使用 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" ></img>
<img class="image" id="img2" src="2.png" ></img>
<img class="image" id="img3" src="3.png" ></img>
<img class="image" id="img4" src="4.png" ></img>
<img class="image" id="img5" src="5.png" ></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>
<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="trapezoidal" 的 div ，但是当我在 html 文档中实现图像时似乎不可能这样做，因为图像不想让这个梯形覆盖它们，当我在样式表中将这些图像实现为背景图像时，它有点工作，但对我来说不可能为 5 个背景图像设置动画，所以看起来不错。
最后，请帮助我编写 jQuery 代码，以使滑块以这种方式工作：每 5 秒图像通过向左滑动而改变。旧的向左移动消失，新的向左移动出现。 （新的应该在旧的“后面”）。
另外请解释为什么我的 jQuery 代码不起作用，我的意思是我知道 jQuery 中有循环，例如 while、for 等，但它们也不起作用，我不知道为什么循环不是每 2 秒重复一次。 ..
【问题讨论】：
setTimeOut 只被调用一次。使用设置间隔。您需要在 2000 年之前添加一个“，”。这是 if(i == 4) NOT if(i = 4) 而且，您的代码只是使图像被隐藏......不显示。我认为您需要先学习javascript的基础知识，然后再试一次 【参考方案1】：代码、开关和幻灯片图像的最简单版本。如果您愿意，您可以对此进行改进和改进。
$(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" src="images/1.jpg" />
<img class="image" id="img2" src="images/2.jpg" />
<img class="image" id="img3" src="images/3.jpg" />
<img class="image" id="img4" src="images/4.jpg" />
<img class="image" id="img5" src="images/5.jpg" />
</section>【讨论】：
好吧，我明白这是如何工作的，我重做了你的代码，所以图像同时淡入和淡出。我有最后一个问题。这将是单独的评论。【参考方案2】：好的，这里是我稍微修改过的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;
问题是，当它们的位置设置为“位置：固定”时，它们显示在梯形上方，我想在梯形上添加“img1”、“img2”、“img3”等段落.
我也尝试过设置 position:absolute 为梯形并删除 .image 类的位置设置，但没有成功。
所以我的问题是：由于上面的 jquery 代码，当图像显示和隐藏时，是否可以使这个梯形显示在图像上方？ 或者我应该......不知道......例如使用 GIMP 在图像本身上添加梯形形状？但它会以负面的方式影响梯形和段落的不透明度，不是吗？
【讨论】：
你能把你的html代码包含进来，做一个sn-p代码吗？以上是关于带有jquery的图片幻灯片库，如何做到这一点？的主要内容，如果未能解决你的问题，请参考以下文章