轮播图效果

轮播图效果代码

    </div>
</div>

<script>
    var carousel_content = document.getElementById('carousel_content')
    var a_all = document.querySelectorAll('#carousel_content>a')
    var indicators = document.querySelectorAll('#zhishideng>div')

    var index = 0;

    var lastIndicator = document.querySelector('#zhishideng>div:nth-child(1)')

    setInterval(function() {
        var idx = 4 - index % 5;

        var a = a_all[idx];

        var indicator = indicators[(index+1) % 5];

        a.style.animation = 'disappear 1s linear both';

        indicator.style.backgroundColor = 'orange';

        if(lastIndicator !=null){
            lastIndicator.style.backgroundColor = 'transparent';
        }

        lastIndicator = indicator;

        setTimeout(function(){
            var temp = document.querySelector('#carousel_content>a:nth-child(1)');
            carousel_content.insertBefore(a,temp);
            a.style.animation = '';
        },1000)

        index++;

    },2000)

</script>