移动端/平板图片不显示及Banner切换时文本标题不更新问题求助

问题概述 #

• 移动设备及平板端图片无法正常显示
• 切换Banner标签时，对应的标题与文本未按预期更新

相关代码 #

<style>
    @media screen and (max-width: 1024px) {
        body {
            margin: 0;
            font-family: 'Nunito Sans', sans-serif;
        }

        .slideshow-container {
            width: 100vw;
            height: 100vh;
            position: relative;
            overflow: hidden;
            background-color: #000;
        }

        .slide {
            width: 100%;
            height: 100%;
            opacity: 0;
            visibility: hidden;
            position: absolute;
            top: 0;
            left: 0;
            transition: opacity 0.5s ease-in-out;
        }

        .slide.active {
            opacity: 1;
            display: inline;
        }

        .slide img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

        .gradient-overlay {
            width: 100%;
            height: 100%;
            position: absolute;
            top: 0;
            left: 0;
            background: linear-gradient(to top, rgba(0, 0, 0, 0.5) 1%, transparent 25%);
            z-index: 2;
        }

        .tab-banners-horizontal {
            position: absolute;
            bottom: 10px;
            left: 50%;
            transform: translateX(-50%);
            display: flex;
            justify-content: space-around;
            align-items: center;
            z-index: 99;
        }

        .tab-banners-horizontal .tab-banner {
            padding: 10px 10px;
            cursor: pointer;
            color: #A4A4A4;
            transition: all 0.3s ease;
            font-size: 20px;
            font-weight: 400;
        }

        .tab-banners-horizontal .tab-banner.active {
            color: white;
        }

        .tab-banner.inactive {
            color: #A4A49B;
        }

        /* Stil for tekstseksjonen */
        .text-section {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            color: #fff;
            text-align: center;
            padding: 10px;
            max-width: 400px;
            z-index: 99;
        }

        .text-section h1 {
            font-size: 35px;
            line-height: 45px;
            font-family: 'Nunito Sans'!important;
            font-weight: 400;
            margin: 0;
            color: white;
        }

        .text-section p {
            font-size: 18px;
            line-height: 26px;
            margin: 10px 0;
            color: white;
        }

        .arrow-icon {
            background-image: url('');
            background-size: contain;
            background-repeat: no-repeat;
            width: 60px;
            height: 60px;
            cursor: pointer;
            position: absolute;
            bottom: 10px;
            left: 50%;
            transform: translateX(-50%);
        }

        .logo {
            position: absolute;
            top: 10px;
            left: 50%;
            transform: translateX(-50%);
            z-index: 100;
        }

        .logo img {
            width: 180px;
            height: auto;
        }
    }
</style>

<body>
<div class="logo">
    <img src="">
</div>

<div class="slideshow-container">
    <div class="gradient-overlay"></div>
    
    <div class="slide" id="seil">
        <img src="">
    </div>
    <div class="slide" id="solseil">
        <img src="">
    </div>
    <div class="slide" id="rigg">
        <img src="">
    </div>
</div>

<div class="text-section">
    <h1 id="image-title">Tittel for valgt bilde/tab</h1>
    <p id="image-text">Dette er teksten som tilhører valgt tab/container.</p>
    <div class="arrow-icon" id="image-arrow"></div>
</div>

<div class="tab-banners-horizontal">
    <div class="tab-banner active" id="seil-banner">
        Seil
    </div>
    <div class="tab-banner" id="solseil-banner">
        Solseil
    </div>
    <div class="tab-banner" id="rigg-banner">
        Rigg
    </div>
</div>

<script>
document.addEventListener("DOMContentLoaded", function () {
const slides = document.querySelectorAll(".slide");
const banners = document.querySelectorAll(".tab-banner");
const imageTitle = document.getElementById("image-title");
const imageText = document.getElementById("image-text");
const arrowIcon = document.getElementById("image-arrow");

const slideData = [
    {
        title: "Seil",
        text: "Seilservice er stolte representanter av OneSails og produserer kvalitetssikre seil i hele Norge – og verden. Ved å tilby turseil, jolleseil, regattaseil og service sørger vi får at du alltid er en bølge foran!",
        link: ""
    },
    {
        title: "Solseil",
        text: "Vi leverer både små og store solseil og seilløsninger til privat og næring. Solseil er en videreutvikling av seil og brukes i det daglige for å oppgradere estetikken i tilværelsen din, samtidig som du sørger for god beskyttelse mot omgivelsene. Ta kontakt med oss i dag for å finne din løsning.",
        link: ""
    },
    {
        title: "Rigg",
        text: "Vi streber etter å gi deg en pålitelig rigg som gir deg full kontroll og maksimal ytelse på vannet. Vi benytter kun materialer av høyeste kvalitet og våre produkter er designet for å vare. Vårt erfarne team står alltid til din disposisjon for reparasjoner og vedlikehold av riggen din, slik at du kan fortsette å nyte seilingen uten bekymringer.",
        link: ""
    }
];

let currentSlideIndex = 0; // Store the index of the current slide

const imagePreloads = [];
for (let i = 0; i < slides.length; i++) {
    imagePreloads[i] = new Image();
    imagePreloads[i].src = slides[i].querySelector("img").src;
}

function updateSlideInfo(slideIndex) {
    imageTitle.textContent = slideData[slideIndex].title;
    imageText.textContent = slideData[slideIndex].text;
    arrowIcon.setAttribute("data-link", slideData[slideIndex].link);
}

function showSlide(slideIndex) {
    slides[slideIndex].style.opacity = 0; // Set initial opacity to 0
    slides[slideIndex].style.visibility = "visible"; // Set visibility to visible
    updateSlideInfo(slideIndex);

    // Use setTimeout to trigger the fade-in effect
    setTimeout(function () {
        slides[slideIndex].style.opacity = 1; // Set opacity to 1 for fade-in
    }, 5);
}

banners[0].classList.add("active");
showSlide(0);
});
</script>
</body>

已尝试操作 #

• 确认图片路径正确
• 在多台移动设备及平板上测试，问题复现一致
• 切换Banner后，标题和文本未出现更新

预期行为 #

• 图片在移动设备、平板上正常加载显示
• 点击不同Banner时，标题和文本同步切换为对应内容

问题分析与修复建议 #

一、移动设备图片不显示问题

原因

1. Slide显示逻辑冲突：CSS定义了.slide.active样式，但JS仅通过修改行内样式控制显示，未同步添加/移除active类，导致CSS规则未生效
2. 图片预加载无效：代码中预加载逻辑读取的是img的空src属性，无法完成图片预加载
3. 样式覆盖不完整：仅在媒体查询内定义移动设备样式，未设置默认基础样式，可能导致布局继承异常

修复步骤

1. 统一Slide显示控制逻辑：
   修改showSlide函数，先隐藏所有slide，再激活目标slide并添加active类：

   function showSlide(slideIndex) {
       // 隐藏所有slide
       slides.forEach(slide => {
           slide.classList.remove('active');
           slide.style.opacity = 0;
           slide.style.visibility = 'hidden';
       });
       // 激活目标slide
       const targetSlide = slides[slideIndex];
       targetSlide.style.visibility = 'visible';
       setTimeout(() => {
           targetSlide.classList.add('active');
           targetSlide.style.opacity = 1;
       }, 5);
       updateSlideInfo(slideIndex);
   }
   

   同步修正CSS中.slide.active的样式：

   .slide.active {
       opacity: 1;
       visibility: visible;
       display: block;
   }
   

2. 填充图片实际路径：确保所有<img>标签的src属性填入有效图片URL，避免空值导致加载失败
3. 添加基础默认样式：在媒体查询外补充body、.slideshow-container等元素的默认样式，保证非移动设备端布局正常，同时避免移动设备样式继承异常

二、Banner切换文本不更新问题

原因

代码未给Banner绑定点击事件，点击操作无法触发slide切换和内容更新逻辑

修复步骤

在DOMContentLoaded回调中添加Banner点击事件监听：

// 绑定Banner点击事件
banners.forEach((banner, index) => {
    banner.addEventListener('click', () => {
        // 更新Banner激活状态
        banners.forEach(b => b.classList.remove('active'));
        banner.classList.add('active');
        // 切换到对应slide并更新内容
        showSlide(index);
    });
});

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