134 lines
4.7 KiB
HTML
134 lines
4.7 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Logo Carousel</title>
|
|
<style>
|
|
/* Wrapper cho carousel */
|
|
.carousel-wrapper {
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
overflow: hidden;
|
|
height: 180px;
|
|
margin: 50px 0;
|
|
}
|
|
|
|
.carousel {
|
|
display: flex;
|
|
gap: 20px;
|
|
}
|
|
|
|
.item-big {
|
|
position: relative;
|
|
width: 120px;
|
|
height: 60px;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.item {
|
|
position: absolute;
|
|
left: 0;
|
|
top: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
opacity: 0;
|
|
transition: opacity 0.8s ease, transform 0.8s ease;
|
|
transform: translateY(100%);
|
|
}
|
|
|
|
.item img {
|
|
display: block;
|
|
width: 100%;
|
|
height: 100%;
|
|
object-fit: contain;
|
|
}
|
|
|
|
.item.active {
|
|
opacity: 1;
|
|
transform: translateY(0);
|
|
}
|
|
|
|
.item.previous {
|
|
opacity: 0;
|
|
transform: translateY(-170%);
|
|
}
|
|
</style>
|
|
</head>
|
|
|
|
<body>
|
|
|
|
<div class="carousel-wrapper">
|
|
<div class="carousel">
|
|
<div class="item-big">
|
|
<div class="item active"><img src="https://www.tncstore.vn/media/brand/22.png" alt="Logo 1"></div>
|
|
<div class="item"><img src="https://www.tncstore.vn/media/brand/23.jpg" alt="Logo 1"></div>
|
|
<div class="item"><img src="https://www.tncstore.vn/media/brand/78.jpg" alt="Logo 1"></div>
|
|
</div>
|
|
<div class="item-big">
|
|
<div class="item active"><img src="https://www.tncstore.vn/media/brand/13.png" alt="Logo 1"></div>
|
|
<div class="item"><img src="https://www.tncstore.vn/media/brand/64.png" alt="Logo 1"></div>
|
|
<div class="item"><img src="https://www.tncstore.vn/media/brand/32.png" alt="Logo 1"></div>
|
|
</div>
|
|
<div class="item-big">
|
|
<div class="item active"><img src="https://www.tncstore.vn/media/brand/11.png" alt="Logo 1"></div>
|
|
<div class="item"><img src="https://www.tncstore.vn/media/brand/28.png" alt="Logo 1"></div>
|
|
<div class="item"><img src="https://www.tncstore.vn/media/brand/17.png" alt="Logo 1"></div>
|
|
</div>
|
|
<div class="item-big">
|
|
<div class="item active"><img src="https://www.tncstore.vn/media/brand/156.jpg" alt="Logo 1"></div>
|
|
<div class="item"><img src="https://www.tncstore.vn/media/brand/145.jpg" alt="Logo 1"></div>
|
|
<div class="item"><img src="https://www.tncstore.vn/media/brand/136.jpg" alt="Logo 1"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</body>
|
|
<script>
|
|
function startCarousel() {
|
|
const itemBigs = document.querySelectorAll('.item-big');
|
|
const staggerDelay = 120;
|
|
|
|
function animateItemBig(itemBig, delay) {
|
|
setTimeout(() => {
|
|
const items = [...itemBig.querySelectorAll('.item')];
|
|
if (items.length === 0) return; // Xử lý itemBig trống
|
|
|
|
let activeItem = itemBig.querySelector('.item.active');
|
|
if (!activeItem) {
|
|
activeItem = items[0];
|
|
activeItem.classList.add('active');
|
|
}
|
|
|
|
const activeItemIndex = items.indexOf(activeItem);
|
|
const nextItemIndex = (activeItemIndex + 1) % items.length;
|
|
|
|
const nextItem = items[nextItemIndex];
|
|
activeItem.classList.remove('active');
|
|
activeItem.classList.add('previous');
|
|
nextItem.classList.add('active');
|
|
activeItem.addEventListener('transitionend', function handler() {
|
|
this.classList.remove('previous');
|
|
this.classList.remove('active'); // Loại bỏ lớp active sau khi chuyển đổi
|
|
this.removeEventListener('transitionend', handler);
|
|
}, { once: true });
|
|
}, delay);
|
|
}
|
|
|
|
function moveToNextSet() {
|
|
itemBigs.forEach((itemBig, index) => {
|
|
animateItemBig(itemBig, index * staggerDelay);
|
|
});
|
|
// Gọi đệ quy để giữ cho vòng quay hoạt động vô thời hạn
|
|
setTimeout(moveToNextSet, 2000); // Điều chỉnh độ trễ nếu cần
|
|
}
|
|
|
|
moveToNextSet();
|
|
}
|
|
|
|
setTimeout(startCarousel, 2000); // Độ trễ ban đầu
|
|
</script>
|
|
|
|
</html> |