轮播图幻灯片

Posted 2020-10-17 huahua_0825

html:

<div id="dlunbo">
        <div class="ig"><img src="img/100.jpg" /></div>
        <div class="ig"><img src="img/101.jpg" /></div>
        <div class="ig"><img src="img/103.jpg" /></div>
        <div class="ig"><img src="img/104.jpg" /></div>
        <div class="ig"><img src="img/105.jpg" /></div>
        <div class="ig"><img src="img/106.jpg" /></div>
</div>

css:

.ig img {
    width: 350px;
    border-radius: 30px;
}

.ig {
    position: absolute;
}

#dlunbo {
    width: 350px;
    height: 233px;
    position: absolute;
    top: 150px;
    left: 100px;
}

js:

var i = 0;
function startLunbo() {
    $(".ig").eq(0).show().siblings().hide();//第一张图片显示，其余的图片隐藏
    setInterval(function () {
        i++;
        if (i == 6) {
            i = 0;
        }
        $(".ig").eq(i).fadeIn(300).siblings().fadeOut(300);
    }, 4000);
}
$(function () {
    startLunbo();
})