在没有Jquery的情况下单击可循环浏览div内容

Question

我有以下代码可以正常工作。 它显示了第一个内容div，然后单击按钮，它旋转到content-2，content-3等。

    $(document).ready(function () {
        var divs = $('div[id^="content-"]').hide(),
            i = 0;

        function cycle() {
            divs.fadeOut(400).delay(400).eq(i).fadeIn(400);
            i = ++i % divs.length;
        };
        cycle()

        $('button').click(cycle);
        // click button to show next paragraph
    });

不幸的是，我正在使用的嵌入式内容不支持外部库，因此我需要将其放入原始Javascript中。

有人可以指出我的直接方向吗？

Answer 1

var counter=2;
function cycle(){   
document.getElementsByClassName("content")[counter].style.opacity=0;
 counter++;
 if(counter==3){
 counter=0;
 }
 document.getElementsByClassName("content")[counter].style.opacity=1;
}



window.onload=function(){
document.getElementById("button").addEventListener("click",function(){cycle();});
cycle();
}

然后css

.content{
transition:all ease 3s;
opacity:0;
position:absolute;
top:0px;
left:0px;
}

Answer 2

您可以尝试通过CSS进行操作。 animate.css可能会有所帮助。

一种类似您正在尝试的方法可以是：

<div id="animatedDiv">Animated DIV</div>


<script>
    document.getElementById("animatedDiv").className = "animated fadeOut";
    setTimeout(function(){
        document.getElementById("animatedDiv").className = "animated fadeIn rotateIn";
    }, 800)
</script>

JSFIDDLE