带有jquery的图片幻灯片库，如何做到这一点？答案

【问题标题】：Image slide gallery with jquery, how to do this?带有jquery的图片幻灯片库，如何做到这一点？
【发布时间】：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" 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="trapezoidal" 的 div ，但是当我在 html 文档中实现图像时似乎不可能这样做，因为图像不想让这个梯形覆盖它们，当我在样式表中将这些图像实现为背景图像时，它有点工作，但对我来说不可能为 5 个背景图像设置动画，所以看起来不错。

最后，请帮助我编写 jQuery 代码，以使滑块以这种方式工作：每 5 秒图像通过向左滑动而改变。旧的向左移动消失，新的向左移动出现。（新的应该在旧的“后面”）。

另外请解释为什么我的 jQuery 代码不起作用，我的意思是我知道 jQuery 中有循环，例如 while、for 等，但它们也不起作用，我不知道为什么循环不是每 2 秒重复一次。 ..

【问题讨论】：

setTimeOut 只被调用一次。使用设置间隔。您需要在 2000 年之前添加一个“，”。这是 if(i == 4) NOT if(i = 4) 而且，您的代码只是使图像被隐藏......不显示。我认为您需要先学习javascript的基础知识，然后再试一次

标签： jquery css image animation slider

【解决方案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" 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>

【讨论】：

好吧，我明白这是如何工作的，我重做了你的代码，所以图像同时淡入和淡出。我有最后一个问题。这将是单独的评论。

【解决方案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代码吗？