javascript - 自动化CSS图像轮播

我有一个5幅图像轮播，可以在我的网站上用作横幅。它完全是用CSS编写的，工作起来很吸引人，但是我认为通过在计时器上旋转幻灯片可以改善UX。

这是我的代码，所有幻灯片均由:nth-of-type选择器表示，因此我尝试通过setTimeout()增加索引值。

$(document).ready(function() {
    var x,
    $slider = $(".carousel__track .carousel__slide:nth-of-type(x)");

    setTimeout(function() {
        if (x = 5) {
            x = 1
        } else {
            x + 1
        }
    }, 500);
});

先谢谢您的帮助。

最佳答案

描述

if (x = 5)设置x等于5，您将要进行比较==或显式比较===。
===表示它必须等于5并且是相同类型（int）。

通过使用x++我们将在进行比较之后递增x，然后如果x等于5，则将x设置为1。另一种方法是设置x = 0然后使用++x在比较之前将x递增操作员。

$(document).ready(function() {
            // initialize x to be equal to 1 rather than null/undefined.
    var     x = 1,
            // you are using a variable here and it needs to be escaped.
            $slider = $(".carousel__track .carousel__slide:nth-of-type(" + x + ")");

    setTimeout(function() {
        // === is an explicit compare equal operator.
        // ++ will increment the value by 1 after any operations
        //    in this case the compare operation.
        if (x++ === 5) {x = 1;}

        $("#"+x+"").prop("checked", true);
    }, 500);
});

关于javascript - 自动化CSS图像轮播，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/41701228/