使用JavaScript实现的轮播仅显示第一张图片，其余空白问题求助

看起来你是在尝试自己写原生JS轮播，但又不小心和Owl Carousel插件的逻辑撞车了——这就是为什么后面两张图片一直空白的核心原因！我来帮你拆解问题，给你两种可行的解决方案：

问题根源分析 #

你的HTML结构里用了Owl Carousel的专属类（owl-carousel、owl-init），这类插件会自动初始化并接管slide的显示/隐藏逻辑。而你自己写的JS又在手动修改display属性，两者的控制逻辑互相干扰，导致后面的图片被插件的样式或JS给"藏"起来了。

方案一：弃用Owl Carousel，用原生JS实现纯自定义轮播 #

如果你不想依赖第三方插件，只想用自己的代码实现轮播，按下面的步骤调整：

1. 清理HTML结构：移除所有Owl Carousel相关的类

<div class="slider-main">
    <div class="item-slide slide1">
        <img src="images/banners/slide2.jpg">
    </div>
    <div class="item-slide slide1">
        <img src="images/banners/slide1.jpg">
    </div>
    <div class="item-slide slide1">
        <img src="images/banners/slide3.jpg">
    </div>
</div>

2. 添加基础CSS：确保轮播容器和slide的布局正常

.slider-main {
    position: relative;
    overflow: hidden;
    width: 100%; /* 按需调整 */
    height: 400px; /* 按需调整 */
}
.item-slide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: none; /* 默认隐藏所有slide */
}
.item-slide img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* 保持图片比例，避免拉伸 */
}

3. 优化你的JS代码：修复潜在的语法问题，让逻辑更稳定

let sliderImages = document.querySelectorAll('.item-slide'), current = 0;

// 隐藏所有slide
function reset() {
    sliderImages.forEach(slide => {
        slide.style.display = 'none';
    });
}

// 轮播核心逻辑
function startSlide() {
    reset();
    sliderImages[current].style.display = 'block';
    // 更新当前索引，到达最后一张后回到开头
    current = current < sliderImages.length - 1 ? current + 1 : 0;
    // 用函数引用代替字符串调用，更安全规范
    setTimeout(startSlide, 2000);
}

// 启动轮播
startSlide();

方案二：用Owl Carousel快速实现轮播（推荐） #

既然你已经写了Owl Carousel的结构和配置属性，直接用插件的功能会更省心，还能获得响应式、过渡动画等额外功能：

1. 确保引入插件依赖：在页面头部添加以下资源（如果还没加的话）

<!-- Owl Carousel样式文件 -->
<link rel="stylesheet" href="path/to/owl.carousel.min.css">
<link rel="stylesheet" href="path/to/owl.theme.default.min.css">

<!-- jQuery（Owl Carousel依赖jQuery） -->
<script src="path/to/jquery.min.js"></script>
<!-- Owl Carousel核心JS -->
<script src="path/to/owl.carousel.min.js"></script>

2. 保留你的HTML结构：插件会自动读取data-*属性完成配置

<div class="owl-init slider-main owl-carousel" data-items="1" data-nav="true" data-dots="false">
    <div class="item-slide slide1">
        <img src="images/banners/slide2.jpg">
    </div>
    <div class="item-slide slide1">
        <img src="images/banners/slide1.jpg">
    </div>
    <div class="item-slide slide1">
        <img src="images/banners/slide3.jpg">
    </div>
</div>

3. 手动初始化（可选）：如果自动初始化不生效，添加这段代码

$(document).ready(function(){
    $('.owl-carousel').owlCarousel({
        items: 1,
        nav: true,
        dots: false,
        autoplay: true, // 开启自动轮播
        autoplayTimeout: 2000 // 轮播间隔2秒
    });
});

最后提一句：方案一适合需要完全自定义的场景，方案二更适合快速实现功能丰富的轮播，你可以根据自己的需求选~

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