From 39a17331b8def20bc1e73c3bf661787010f226b7 Mon Sep 17 00:00:00 2001
From: Tieptk <tieptk@hurasoft.com>
Date: Mon, 25 Nov 2024 22:09:34 +0700
Subject: [PATCH] up

---
 img.html | 126 ++++++++++++++++++-------------------------------------
 1 file changed, 41 insertions(+), 85 deletions(-)
diff --git a/img.html b/img.html
index a3c5ea7..cc71d58 100644
--- a/img.html
+++ b/img.html
@@ -35,144 +35,100 @@
             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 */
+            transition: opacity 0.8s ease, transform 0.8s ease;
             transform: translateY(100%);
-            /* Mặc định item bắt đầu ở dưới */
+        }
+
+        .item img {
+            display: block;
+            width: 100%;
+            height: 100%;
+            object-fit: contain;
         }
 
         .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%);
+            opacity: 0;
+            transform: translateY(-170%);
         }
     </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 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://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 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://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 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://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 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; // Độ trễ tính bằng mili giây giữa mỗi itemBig
+        const staggerDelay = 120;
 
-        // Hàm để bắt đầu hoạt hình của một itemBig cụ thể
         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 && items.length > 0) {
+                if (!activeItem) {
                     activeItem = items[0];
                     activeItem.classList.add('active');
                 }
 
-                if (!activeItem) return; // Xử lý itemBig trống
-
                 const activeItemIndex = items.indexOf(activeItem);
                 const nextItemIndex = (activeItemIndex + 1) % items.length;
 
-                if (nextItemIndex !== activeItemIndex) {
-                    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.removeEventListener('transitionend', handler);
-                    }, { once: true });
-                }
+                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);
         }
 
-
-        // Bắt đầu hoạt hình với độ trễ xen kẽ.
-        itemBigs.forEach((itemBig, index) => {
-            animateItemBig(itemBig, index * staggerDelay);
-        });
-
-        // Hàm để xử lý chuyển đổi sang nhóm itemBig tiếp theo.
         function moveToNextSet() {
-            setTimeout(() => {
-                // Logic để chuyển sang nhóm itemBig tiếp theo. Điều này có thể liên quan đến logic phức tạp hơn tùy thuộc vào cấu trúc của bạn
-                // Để đơn giản, tôi chỉ lặp lại tất cả các itemBig một lần nữa. Bạn cần điều chỉnh điều này.
-                itemBigs.forEach((itemBig, index) => {
-                    animateItemBig(itemBig, index * staggerDelay);
-                });
-            }, 2000); // độ trễ 2 giây trước khi chuyển sang nhóm tiếp theo
+            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)
-
+    setTimeout(startCarousel, 2000); // Độ trễ ban đầu
 </script>
 
 </html>
\ No newline at end of file
