背景图轮播

html

    <div class="box">
            <img src="1.jpg" class="now_img">
            <img src="2.jpg">
            <img src="3.jpg">
            <img src="2.jpg">
        </div>

css

           .box{
                width: 500px;
                height: 200px;
                margin: 0 auto;
                position: relative;
            }
            .box img{
                position: absolute;
                width: 500px;
                height: 200px;
                transition: 1s;
                opacity: 0;
            }
            .box .now_img{
                opacity: 1;
            }

js

function change_img(index=index||0) {
            $('.box img').removeClass('now_img').eq(index).addClass('now_img');
        }
        var index= 0;
        var timer = setInterval(res=>{
            index>2?index=0:index++;
            change_img(index);
        },4500);