JQuery 操作Class滚动轮播展示效果

news2024/9/20 21:17:09

JQuery 操作Class滚动轮播展示效果

展示效果：

1.html

<div class="list">
    <div class="item">
        <div class="icon"></div>
        <div class="content">
            第一行xxxxxxxxx
        </div>
    </div>
    <div class="item">
        <div class="icon"></div>
        <div class="content">
            第二行xx
        </div>
    </div>
    <div class="item">
        <div class="icon"></div>
        <div class="content">
            第三行xxx
        </div>
    </div>
    <div class="item">
        <div class="icon"></div>
        <div class="content">
            第四行
        </div>
    </div>
</div>

2.css

@keyframes runOne {
    0% {
        top: 250px;
        opacity: 0;
        transform: scale(0.5);
    }

    25% {
        top: 150px;
        opacity: 1;
        transform: scale(1);
    }

    75% {
        top: 150px;
        opacity: 1;
        transform: scale(1);
    }

    100% {
        top: 50px;
        opacity: 0;
        transform: scale(0.5);
    }
}

.item {
    background: rgba(0, 0, 0, 0.5);
    padding: 10px 10px;
    border: 1px solid blue;
    display: inline-block;
    line-height: 30px;
    font-size: 18px;
    position: fixed;
    top: 250px;
    opacity: 0;
    transform: scale(0.5);
}

.item .icon {
    width: 30px;
    height: 30px;
    background-color: red;
    border-radius: 50%;
    float: left;
}

.item .content {
    margin-left: 40px;
}

.item.active {
    animation: runOne ease-in-out 3s forwards;
}

3.js

var total = 4;
var index = 0;
setInterval(function () {
    index++;
    show(index);
    console.info(index);
    if (index == total - 1) {
        index = -1;
    }
}, 3000);

//展示第几个
function show(index) {
    $('.item').eq(index).addClass('active')
        .siblings()
        .removeClass('active');
}
show(index);