first commit

10 months ago · 55488b65ad
parent de4aed91e4
commit 55488b65ad
7 changed files with 302 additions and 0 deletions
--- a/cache.html
+++ b/cache.html
@ -0,0 +1,169 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Carousel Example</title>
+    <style>
+        body {
+            font-family: Arial, sans-serif;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            height: 100vh;
+            margin: 0;
+            background-color: #f0f0f0;
+        }
+
+        .carousel-container {
+            position: relative;
+            width: 80%;
+            max-width: 600px;
+            overflow: hidden;
+            border: 2px solid #ddd;
+            border-radius: 10px;
+            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+        }
+
+        .carousel-images {
+            display: flex;
+            transition: transform 0.5s ease-in-out;
+        }
+
+        .carousel-images img {
+            width: 100%;
+            display: block;
+            object-fit: cover;
+        }
+
+        button {
+            position: absolute;
+            top: 50%;
+            transform: translateY(-50%);
+            background-color: rgba(0, 0, 0, 0.5);
+            color: white;
+            border: none;
+            padding: 10px;
+            cursor: pointer;
+            z-index: 1;
+        }
+
+        #prev-btn {
+            left: 10px;
+        }
+
+        #next-btn {
+            right: 10px;
+        }
+
+        .dots-container {
+            position: absolute;
+            bottom: 10px;
+            left: 50%;
+            transform: translateX(-50%);
+            display: flex;
+        }
+
+        .dot {
+            height: 10px;
+            width: 10px;
+            margin: 0 5px;
+            background-color: rgba(255, 255, 255, 0.5);
+            border-radius: 50%;
+            cursor: pointer;
+        }
+
+        .dot.active {
+            background-color: rgba(0, 0, 0, 0.5);
+        }
+    </style>
+</head>
+
+<body>
+    <div class="carousel-container">
+        <div class="carousel-images">
+            <!-- JavaScript will populate these images -->
+        </div>
+        <button id="prev-btn"> < </button>
+        <button id="next-btn"> > </button>
+        <div class="dots-container">
+            <!-- JavaScript will populate these dots -->
+        </div>
+    </div>
+    <script>document.addEventListener("DOMContentLoaded", function () {
+            const imgs = [
+                { src: "pic/1.png" },
+                { src: "pic/2.jpg" },
+                { src: "pic/3.jpg" },
+                { src: "pic/4.jpg" },
+                { src: "pic/5.png" },
+            ];
+
+            const carouselImages = document.querySelector('.carousel-images');
+            const dotsContainer = document.querySelector('.dots-container');
+            let currentIndex = 0;
+
+            // Populate images  
+            imgs.forEach(img => {
+                const imgElement = document.createElement('img');
+                imgElement.src = img.src;
+                carouselImages.appendChild(imgElement);
+            });
+
+            // Populate dots  
+            imgs.forEach((_, index) => {
+                const dot = document.createElement('div');
+                dot.classList.add('dot');
+                dot.dataset.index = index;
+                dotsContainer.appendChild(dot);
+            });
+
+            const dots = document.querySelectorAll('.dot');
+
+            function autoPlayCarousel() {  
+                carouselInterval = setInterval(() => {  
+                    currentIndex = (currentIndex + 1) % imgs.length;  
+                    updateCarousel();  
+                }, 5000); // 2 seconds  
+            }  
+
+            autoPlayCarousel();  
+
+            // Update carousel on next button click  
+            document.getElementById('next-btn').addEventListener('click', () => {
+                currentIndex = (currentIndex + 1) % imgs.length;
+                updateCarousel();
+                autoPlayCarousel();
+            });
+
+            // Update carousel on prev button click  
+            document.getElementById('prev-btn').addEventListener('click', () => {
+                currentIndex = (currentIndex - 1 + imgs.length) % imgs.length;
+                updateCarousel();
+                autoPlayCarousel();
+            });
+
+            // Update carousel on dot click  
+            dots.forEach(dot => {
+                dot.addEventListener('click', () => {
+                    currentIndex = parseInt(dot.dataset.index);
+                    updateCarousel();
+                    autoPlayCarousel();
+                });
+            });
+
+            function updateCarousel() {
+                const offset = -currentIndex * 100 + '%';
+                carouselImages.style.transform = `translateX(${offset})`;
+
+                dots.forEach(dot => dot.classList.remove('active'));
+                dots[currentIndex].classList.add('active');
+            }
+
+            // Initial highlight  
+            dots[currentIndex].classList.add('active');
+        });</script>
+</body>
+
+</html>
--- a/index0.html
+++ b/index0.html
@ -0,0 +1,133 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Image Carousel</title>
+    <style>
+        .pics img {
+            width: 600px;
+            height: 400px;
+            object-fit: cover;
+            display: none;
+        }
+
+        .pics img.active {
+            display: block;
+        }
+
+        button.prev,
+        button.next {
+            position: absolute;
+            top: 50%;
+            transform: translateY(-50%);
+            background-color: rgba(0, 0, 0, 0.5);
+            color: white;
+            border: none;
+            padding: 10px;
+            cursor: pointer;
+            z-index: 1;
+        }
+
+        button.prev {
+            left: 10px;
+        }
+
+        button.next {
+            right: 10px;
+        }
+
+        .dots span {
+            display: inline-block;
+            width: 10px;
+            height: 10px;
+            margin: 5px;
+            background-color: gray;
+            border-radius: 50%;
+            cursor: pointer;
+        }
+
+        .dots span.active {
+            background-color: black;
+        }
+    </style>
+</head>
+
+<body>
+    <div class="pics"></div>
+    <button class="prev">‹</button>
+    <button class="next">›</button>
+    <div class="dots"></div>
+
+    <script>
+        let imgs = [
+            { src: "pic/1.png" },
+            { src: "pic/2.jpg" },
+            { src: "pic/3.jpg" },
+            { src: "pic/4.jpg" },
+            { src: "pic/5.png" },
+        ];
+
+        const picsContainer = document.querySelector('.pics');
+        const prevButton = document.querySelector('.prev');
+        const nextButton = document.querySelector('.next');
+        const dotsContainer = document.querySelector('.dots');
+  
+        imgs.forEach(imgObj => {
+            const img = document.createElement('img');
+            img.src = imgObj.src;
+            picsContainer.appendChild(img);
+        });
+
+        const images = document.querySelectorAll('.pics img');
+        let i = 0;
+ 
+        imgs.forEach((_, index) => {
+            const dot = document.createElement('span');
+            dot.dataset.index = index;
+            dotsContainer.appendChild(dot);
+        });
+
+        const dots = document.querySelectorAll('.dots span');
+  
+        function updatePics() {
+            images.forEach((img, index) => {
+                img.classList.toggle('active', index === i);
+            });
+
+            dots.forEach(dot => {
+                dot.classList.toggle('active', dot.dataset.index === i);
+            });
+        }
+
+        function nextImage() {
+            i = (i + 1) % images.length;
+            updatePics();
+        }
+
+        function prevImage() {
+            i = (i - 1 + images.length) % images.length;
+            updatePics();
+        }
+
+        prevButton.addEventListener('click', prevImage);
+        nextButton.addEventListener('click', nextImage);
+
+        dots.forEach(dot => {
+            dot.addEventListener('click', () => {
+                i = parseInt(dot.dataset.index);
+                updatePics();
+
+
+
+                
+            });
+        });
+
+        images[0].classList.add('active');
+        dots[0].classList.add('active');  
+    </script>
+</body>
+
+</html>
--- a/pic/1.png
+++ b/pic/1.png
--- a/pic/2.jpg
+++ b/pic/2.jpg
--- a/pic/3.jpg
+++ b/pic/3.jpg
--- a/pic/4.jpg
+++ b/pic/4.jpg
--- a/pic/5.png
+++ b/pic/5.png