Question

我用Javascript创建了一个轮播。我正在使用animate.css，它可以让我使用一些很酷的过渡。我有一个名为fadeInLeft的课程也适用于每个div。我现在正尝试删除fadeInLeft并添加FadeOutLeft以使转换顺利进行。然而，目前我所尝试的一切只会让当前的幻灯片大幅消失。当前幻灯片之后的想法已经淡出到左侧我希望下一张幻灯片从左侧淡出。任何人都可以建议我如何实现这一目标？

var index = 1;

    function plusIndex(n) {
        index = index + 1;
        showImage(index);
    }

    showImage(1);

    function showImage(n){
        var i;
        var x = document.getElementsByClassName("carousel");
        if(n > x.length){index = 1};
        if(n< 1){ index = x.length};
        for(i=0;i<x.length;i++)
        {
            x[i].style.display = "none";
        }
        x[index-1].style.display = "block";
    }

<i type="button" onclick="plusIndex(-1)" class="fa fa-chevron-left arrowLeft arrow" aria-hidden="true"></i>
        <i type="button" onclick="plusIndex(1)" class="fa fa-chevron-right arrowRight arrow" aria-hidden="true"></i>
    <div class="carousel carousel1 animated fadeInLeft"></div>
    <div class="carousel carousel2 animated fadeInLeft"></div>
    <div class="carousel carousel3 animated fadeInLeft"></div>

Answer 1

您的代码有很多类首先你选择标签可能是这样的：
```
var div = document.getElementsByClassName[0];
```
您获得了班级列表并删除了fadeInLeft
```
div.classList.remove("fadeInLeft");
```
您添加了另一个类
```
div.classList.add("fadeOutLeft")
```

Javascript删除并在旋转木马上添加一个缓慢过渡的类

1 个答案: