在沒有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