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);
更多: