tieptk/demo
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

update

Browse Source
This commit is contained in:
Tieptk
2024-11-25 17:43:44 +07:00
commit 95dede4f52
2 changed files with 278 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

177
img.html Normal file
View File

@@ -0,0 +1,177 @@
<!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;
/* Mặc định ẩn tất cả các item */
transition: opacity 1s ease, transform 1s ease;
/* Thêm transition cho transform */
transform: translateY(100%);
/* Mặc định item bắt đầu ở dưới */
}
.item.active {
opacity: 1;
/* Hiển thị item khi có lớp active */
transform: translateY(0);
/* Item sẽ di chuyển lên vị trí gốc */
}
.item.previous {
opacity: 0.3;
/* Làm mờ các item trước */
transform: translateY(-150%);
}
</style>
</head>
<body>
<!-- Wrapper cho carousel -->
<div class="carousel-wrapper">
<div class="carousel">
<!-- Các logo ban đầu -->
<div class="item-big">
<div class="item active">
<img src="https://via.placeholder.com/120x60?text=Logo+1" alt="Logo 1">
</div>
<div class="item">
<img src="https://via.placeholder.com/120x60?text=Logo+5" alt="Logo 1">
</div>
<div class="item">
<img src="https://via.placeholder.com/120x60?text=Logo+10" alt="Logo 1">
</div>
</div>
<div class="item-big">
<div class="item active">
<img src="https://via.placeholder.com/120x60?text=Logo+1" alt="Logo 1">
</div>
<div class="item">
<img src="https://via.placeholder.com/120x60?text=Logo+5" alt="Logo 1">
</div>
<div class="item">
<img src="https://via.placeholder.com/120x60?text=Logo+10" alt="Logo 1">
</div>
</div>
<div class="item-big">
<div class="item active">
<img src="https://via.placeholder.com/120x60?text=Logo+1" alt="Logo 1">
</div>
<div class="item">
<img src="https://via.placeholder.com/120x60?text=Logo+5" alt="Logo 1">
</div>
<div class="item">
<img src="https://via.placeholder.com/120x60?text=Logo+10" alt="Logo 1">
</div>
</div>
<div class="item-big">
<div class="item active">
<img src="https://via.placeholder.com/120x60?text=Logo+1" alt="Logo 1">
</div>
<div class="item">
<img src="https://via.placeholder.com/120x60?text=Logo+5" alt="Logo 1">
</div>
<div class="item">
<img src="https://via.placeholder.com/120x60?text=Logo+10" alt="Logo 1">
</div>
</div>
</div>
</div>
</body>
<script>
function startCarousel() {
const itemBigs = document.querySelectorAll('.item-big'); // Get all item-big groups
let currentItemBigIndex = 0; // Start with the first item-big
// Hàm để thay đổi từng item trong item-big
function changeItemBig(index) {
const itemBig = itemBigs[index]; // Get the current item-big
const items = itemBig.querySelectorAll('.item');
let currentIndex = 0; // Start with the first item in the item-big group
// Initialize the first item as active
items.forEach(item => item.classList.remove('active'));
items[currentIndex].classList.add('active');
// Chuyển sang item tiếp theo sau mỗi khoảng thời gian
setTimeout(() => {
// Thêm class 'previous' cho item hiện tại
const currentItem = items[currentIndex];
currentItem.classList.add('previous'); // Thêm class previous
// Chuyển sang item tiếp theo
currentIndex = (currentIndex + 1) % items.length; // Move to the next item
const nextItem = items[currentIndex];
nextItem.classList.add('active'); // Thêm class active cho item tiếp theo
// Sau khi chuyển đổi xong, xóa class 'previous' khỏi item trước đó
currentItem.addEventListener(
'transitionend',
() => {
currentItem.classList.remove('previous');
},
{ once: true }
);
// Sau khi chuyển đổi hết item của một item-big, chuyển sang item-big tiếp theo
setTimeout(() => {
currentItemBigIndex = (currentItemBigIndex + 1) % itemBigs.length; // Chuyển qua nhóm tiếp theo
if (currentItemBigIndex === 0) {
// Nếu đã duyệt hết tất cả các item-big, quay lại nhóm đầu tiên
startCarousel();
} else {
changeItemBig(currentItemBigIndex); // Tiến hành chuyển sang nhóm item-big tiếp theo
}
}, 100); // Thời gian delay trước khi chuyển sang item-big khác
}, 500); // Mỗi item sẽ chuyển mỗi 4 giây
}
// Bắt đầu với item-big đầu tiên
changeItemBig(currentItemBigIndex);
}
// Bắt đầu chạy carousel
startCarousel();
</script>
</html>