添加淡入幻灯片脚本？

Question

我想知道是否有人可以帮助我，有没有办法在这个preticular脚本代码中添加幻灯片？它针对更改图像的按钮。先谢谢！

<script>
    var slideIndex1 = 1;
    showDivs1(slideIndex1);

    function plusDivs1(n) {
        showDivs1(slideIndex1 += n);
    }

    function showDivs1(n) {
        var i;
        var y = document.getElementsByClassName("mySlides1");
        if (n > y.length) {
            slideIndex1 = 1
        }
        if (n < 1) {
            slideIndex1 = y.length
        }
        for (i = 0; i < y.length; i++) {
            y[i].style.display = "none";
        }
        y[slideIndex1 - 1].style.display = "block";
    }

</script>

Answer 1

我相信您希望实现的是旋转木马（Bootstrap example）

不是将display="none"应用于所有这些元素，如果我是你，我会切换一些使用动画或过渡的CSS类。

您可以详细了解CSS动画here（just an example of what you can achieve with vanilla CSS）

创建一个工作且响应迅速的轮播可能会很繁琐，因此我建议您使用预制解决方案，或者使用诸如jQuery之类的工具库，它提供了大量的动画。