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

在没有Jquery的情况下循环访问div内容

2 个答案: