Javascript DOM动画的IF语句有问题&；JQuery'的效果；分配_Javascript_Jquery

Javascript DOM动画的IF语句有问题&；JQuery'的效果；分配

javascript jquery

Javascript DOM动画的IF语句有问题&；JQuery'的效果；分配,javascript,jquery,Javascript,Jquery,我正在创建一个简单的幻灯片，它是我的“DOM动画和效果与JQuery”任务的一部分，重点是JavaScript、HTML、CSS和JQuery 任务很简单：用两个按钮（上一个和下一个）创建一个幻灯片。当我点击相应的按钮时，它会带我进入下一张幻灯片或上一张幻灯片 var$one=$（“.one”）变量$two=$（“.two”）； var$three=$（“.three”）；变量$four=$（“.four”）； var$five=$（“.five”）； var$six=$（“.six”）；

我正在创建一个简单的幻灯片，它是我的“DOM动画和效果与JQuery”任务的一部分，重点是JavaScript、HTML、CSS和JQuery

任务很简单：用两个按钮（上一个和下一个）创建一个幻灯片。当我点击相应的按钮时，它会带我进入下一张幻灯片或上一张幻灯片

var$one=$（“.one”）
变量$two=$（“.two”）；
var$three=$（“.three”）；
变量$four=$（“.four”）；
var$five=$（“.five”）；
var$six=$（“.six”）；
var$seven=$（“.seven”）；
$2.hide（）；
$3.hide（）；
$4.hide（）；
$5.hide（）；
$6.hide（）；
$7.hide（）；
$1.slideDown（）；
var$prev=$（“prev”）；
var$next=$（“next”）；
$next.on（“单击”，函数（）{
如果（$one.slideDown（））{
$1.hide（）；
$2.slideDown（）；
}否则{
$1.slideDown（）；
}
});
$prev.on（“提交”，函数（）{
如果（$one.slideDown（））{
$1.hide（）；
$6.slideDown（）；
}否则{
$1.slideDown（）；
}
});
img{
边框：6px rgb（245166 166）实心；
}

⬅︎ 上︎
下一个➡
您的代码看起来更像这样。有一些边缘情况，但您现在应该能够处理它们
我所做的：
-为滑块提供了一个幻灯片类
-我将是活动类添加到活动滑块
-单击按钮时，“删除”处于活动状态
<!DOCTYPE html>
    <html>
        <head>
            <meta charset="utf-8">
            <title>Project: Interactive slideshow</title>
            <style>
            img {
                border: 6px rgb(245, 166, 166) solid;
            }
            </style>
        </head>
        <body>

        <br>
        <img src="https://www.kasandbox.org/programming-images/food/mushroom.png" width="500" alt="Mushrooms" class="slide" >
        <img src="https://www.kasandbox.org/programming-images/food/berries.png" width="500" alt="Berries" class="slide" >
        <img src="https://www.kasandbox.org/programming-images/food/broccoli.png" width="500" alt="Broccoli" class="slide" >
        <img src="https://www.kasandbox.org/programming-images/food/brussels-sprouts.png" width="400" alt="Sprouts" class="slide" >
        <img src="https://www.kasandbox.org/programming-images/food/chocolates.png" width="500" alt="Chocolates" class="slide" >
        <img src="https://www.kasandbox.org/programming-images/food/fruits.png" width="500" alt="Fruits" class="slide" >
        <img src="https://www.kasandbox.org/programming-images/food/cake.png" width="500" alt="Cake" class="slide" >
        <button class="prev">⬅︎ Prev︎</button>
        <button class="next">Next ➡</button>

    <script>
        var slide = $(".slide")

        slide.hide();
        slide.first().show().addClass('is-active');
        // slide.first().slideDown();

        //variables
        var prev = $(".prev");
        var next = $(".next");

        //Next button action
        next.on("click", function() {
            slide.hide();
            $('.is-active').removeClass('is-active').next().addClass('is-active').show();

        });

        //Prev button action
        prev.on("click", function() {
            slide.hide();
            $('.is-active').removeClass('is-active').prev().addClass('is-active').show();

        });
    </script>

        </body>
    </html>


项目：交互式幻灯片放映
img{
边框：6px rgb（245166 166）实心；
}


⬅︎ 上︎
下一个➡
变量幻灯片=$（“.slide”）
slide.hide（）；
slide.first（）.show（）.addClass（'is-active'）；
//slide.first（）.slideDown（）；
//变数
var prev=$（“.prev”）；
var next=$（“.next”）；
//下一步按钮动作
next.on（“单击”，函数（）{
slide.hide（）；
$（'.is-active'）.removeClass（'is-active'）.next（）.addClass（'is-active'）.show（）；
});
//上一按钮动作
上一页（“单击”，函数（）{
slide.hide（）；
$（'.is-active'）.removeClass（'is-active'）.prev（）.addClass（'is-active'）.show（）；
});

注意：请尽量避免一、二、三等课程。因为如果有大约1000个图像，你就不会添加1000行代码，因为那会变得一团糟
 您的代码看起来更像这样。有一些边缘情况，但您现在应该能够处理它们
我所做的：
-为滑块提供了一个幻灯片类
-我将是活动类添加到活动滑块
-单击按钮时，“删除”处于活动状态
<!DOCTYPE html>
    <html>
        <head>
            <meta charset="utf-8">
            <title>Project: Interactive slideshow</title>
            <style>
            img {
                border: 6px rgb(245, 166, 166) solid;
            }
            </style>
        </head>
        <body>

        <br>
        <img src="https://www.kasandbox.org/programming-images/food/mushroom.png" width="500" alt="Mushrooms" class="slide" >
        <img src="https://www.kasandbox.org/programming-images/food/berries.png" width="500" alt="Berries" class="slide" >
        <img src="https://www.kasandbox.org/programming-images/food/broccoli.png" width="500" alt="Broccoli" class="slide" >
        <img src="https://www.kasandbox.org/programming-images/food/brussels-sprouts.png" width="400" alt="Sprouts" class="slide" >
        <img src="https://www.kasandbox.org/programming-images/food/chocolates.png" width="500" alt="Chocolates" class="slide" >
        <img src="https://www.kasandbox.org/programming-images/food/fruits.png" width="500" alt="Fruits" class="slide" >
        <img src="https://www.kasandbox.org/programming-images/food/cake.png" width="500" alt="Cake" class="slide" >
        <button class="prev">⬅︎ Prev︎</button>
        <button class="next">Next ➡</button>

    <script>
        var slide = $(".slide")

        slide.hide();
        slide.first().show().addClass('is-active');
        // slide.first().slideDown();

        //variables
        var prev = $(".prev");
        var next = $(".next");

        //Next button action
        next.on("click", function() {
            slide.hide();
            $('.is-active').removeClass('is-active').next().addClass('is-active').show();

        });

        //Prev button action
        prev.on("click", function() {
            slide.hide();
            $('.is-active').removeClass('is-active').prev().addClass('is-active').show();

        });
    </script>

        </body>
    </html>


项目：交互式幻灯片放映
img{
边框：6px rgb（245166 166）实心；
}


⬅︎ 上︎
下一个➡
变量幻灯片=$（“.slide”）
slide.hide（）；
slide.first（）.show（）.addClass（'is-active'）；
//slide.first（）.slideDown（）；
//变数
var prev=$（“.prev”）；
var next=$（“.next”）；
//下一步按钮动作
next.on（“单击”，函数（）{
slide.hide（）；
$（'.is-active'）.removeClass（'is-active'）.next（）.addClass（'is-active'）.show（）；
});
//上一按钮动作
上一页（“单击”，函数（）{
slide.hide（）；
$（'.is-active'）.removeClass（'is-active'）.prev（）.addClass（'is-active'）.show（）；
});

注意：请尽量避免一、二、三等课程。因为如果有大约1000个图像，你就不会添加1000行代码，因为那会变得一团糟
 if（$one.slideDown（））
不是检查元素是否可见的正确方法。相反，请尝试如果（$one.is（“：visible”）
我很难在这里帮助您完成作业，我不想让您重复代码。然而@TylerRoper已经用if
语句解决了眼前的问题。更进一步，我建议您研究DRY原则，以及如何对每个图像使用单个函数来泛化此逻辑，而根本不需要if
语句。没有它，你会有非常冗长，难以维持的逻辑。谢谢泰勒和罗里。如果其他任何人可以建议一个其他的原则或视频（教程）扩展上述内容，这将是一个很大的帮助。我在这里学习。如果（$one.slideDown（））
不是检查元素是否可见的正确方法。相反，请尝试如果（$one.is（“：visible”）
我很难在这里帮助您完成作业，我不想让您重复代码。然而@TylerRoper已经用if
语句解决了眼前的问题。更进一步，我建议您研究DRY原则，以及如何对每个图像使用单个函数来泛化此逻辑，而根本不需要if
语句。没有它，你会有非常冗长，难以维持的逻辑。谢谢泰勒和罗里。如果其他任何人可以建议一个其他的原则或视频（教程）扩展上述内容，这将是一个很大的帮助。我在这里学习。感谢MuhammadMuhammed-您是否能够深入了解有关以下内容的更多详细信息：“为滑块提供了幻灯片类-我将是活动类添加到活动滑块-单击按钮时删除是活动的”？1.为什么要添加类并删除它？它告诉系统做什么？我只是想理解这一点，因为我们还没有更详细地介绍添加/删除类。在下面的代码部分中更是如此：``$（'.is-active'）.removeClass（'is-a