请求协助设置JavaScript轮播图每张图片10分钟停留时长

Hey there! Let’s get your company infoscreen slideshow sorted with the 10-minute per-image timer you need. I’ve updated your code to ensure each slide stays visible exactly 10 minutes before fading out, with infinite looping and smooth transitions. Here’s everything you need:

Key Adjustments Made #

• Added a configurable slideDuration set to 10 minutes (600000 milliseconds)
• Implemented CSS-powered fade transitions for seamless slide changes
• Built in infinite looping between slides
• Added basic error handling for missing elements

Updated Full JavaScript Code #

(function() {
    function Slideshow(element) {
        this.el = document.querySelector(element);
        // Set slide duration to 10 minutes (60 * 10 * 1000 = 600000 ms)
        this.slideDuration = 600000;
        this.currentSlideIndex = 0;
        this.init();
    }

    Slideshow.prototype = {
        init: function() {
            this.wrapper = this.el.querySelector(".slider-wrapper");
            this.slides = this.el.querySelectorAll(".slide");
            
            // Exit early if no slides are found
            if (this.slides.length === 0) {
                console.error("No slides detected in the slideshow container!");
                return;
            }

            // Set initial state: show first slide, hide others
            this.slides.forEach((slide, index) => {
                slide.style.opacity = index === 0 ? "1" : "0";
                slide.style.transition = "opacity 1.2s ease-in-out"; // Smooth fade timing
            });

            // Start automatic slideshow
            this.startAutoCycle();
        },

        startAutoCycle: function() {
            // Trigger slide change after the 10-minute duration
            this.slideTimer = setTimeout(() => {
                this.switchSlide();
            }, this.slideDuration);
        },

        switchSlide: function() {
            // Fade out current slide
            const currentSlide = this.slides[this.currentSlideIndex];
            currentSlide.style.opacity = "0";

            // Calculate next slide index (loop back to first after last)
            this.currentSlideIndex = (this.currentSlideIndex + 1) % this.slides.length;
            const nextSlide = this.slides[this.currentSlideIndex];

            // Wait for fade-out to complete before showing next slide
            setTimeout(() => {
                nextSlide.style.opacity = "1";
                // Restart timer for the next slide
                this.startAutoCycle();
            }, 1200); // Match this to your transition duration (1.2s here)
        },

        // Optional: Add pause/resume functions for manual control
        pause: function() {
            clearTimeout(this.slideTimer);
        },

        resume: function() {
            this.startAutoCycle();
        }
    };

    // Initialize slideshow when DOM is fully loaded
    document.addEventListener("DOMContentLoaded", function() {
        new Slideshow("#infoscreen-slideshow"); // Replace with your element selector
    });
})();

Required CSS (Add to Your Stylesheet) #

To make the fade transitions work correctly, add these styles:

.slider-wrapper {
    position: relative;
    width: 100%;
    height: 100vh; /* Adjust to match your infoscreen dimensions */
    overflow: hidden;
}

.slide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover; /* Ensure images fill the screen without distortion */
    opacity: 0;
    transition: opacity 1.2s ease-in-out;
}

.slide:first-child {
    opacity: 1;
}

How It Works #

1. Duration Configuration: The slideDuration variable at the top makes it easy to adjust the timer later if needed.
2. Initialization: On page load, the first slide is visible, and all others are hidden with opacity 0.
3. Automatic Cycling: A timer triggers the slide switch after 10 minutes. The current slide fades out, then the next slide fades in once the transition finishes.
4. Infinite Looping: Using (currentSlideIndex + 1) % slides.length ensures the slideshow loops back to the first slide after the last one.

Quick Tips for Your Infoscreen #

• Test on Target Hardware: Verify the browser on your infoscreen handles long timers correctly (most modern browsers do, but it’s worth checking).
• Optimize Images: Compress images to reduce load times and ensure smooth transitions, especially for large files.
• Manual Controls (Optional): If you need to skip slides manually, add buttons that call the switchSlide() method directly.

内容的提问来源于stack exchange，提问作者Alessandro Troisi