JavaScript slider 动态改变 + HTML/CSS ，不改变图片

Question

我有一个站点，主菜单中有一个图像，我想每 5 秒更改一次。 该图像在 CSS 类中引用，我需要每 5 秒用另一个图像更改此图像。为此，我编写了一个 JavaScript 代码并在 css 中添加了额外的 url。 但是 Javascript 代码有问题，我无法捕捉到。 首先，我在控制台中收到一条消息，指出我的变量 MaxSlider 未定义。 其次，我认为在我的函数“changeMainSlider”中我没有正确指向。

<main class="container">
   <div class="main-image">
      <div class="text">
         <div class="title">Lorem ipsum dolor</div>
         <div class="title2">Lorem ipsum dolor sit amet</div>
      </div>
   </div>
</main>

.main-image {
    height:  340px;
    background: url(img/slide.jpg), url(img/gallery-1.jpg), url(img/gallery-2.jpg) center;
    background-size: cover;
    position: relative;
    margin-bottom: 60px;
}




var mainSlider = new MaxSlider('.main-slider');
var mainSliderInterval;
changeMainSlider();
var main_slider_el = document.getElementsByClassName('.main-slider');
main_slider_el.addEventListener('mouseenter', function () {
    clearInterval(mainSliderInterval);
});
main_slider_el.addEventListener('mouseleave', function () {
    changeMainSlider();
});

function changeMainSlider() {
    mainSliderInterval = setInterval(function () {
        mainSlider.nextItem();
    }, 5000);
}

Answer 1

我做了一些配置。第一次我有一些错误和一些遗漏的代码。 在我将其更改为:

<div class="max-slider" id="main-slider">
                <div class="list-items">>
                    <div class="item">
                            <div class="main-image">
                                    <div class="text">
                                        <div class="title">Lorem ipsum dolor</div>
                                        <div class="title2">Lorem ipsum dolor sit amet</div>
                                    </div>
                                </div>
                    </div>
                    <div class="item">
                            <div class="main-image2">
                                    <div class="text">
                                        <div class="title">Lorem ipsum dolor</div>
                                        <div class="title2">Lorem ipsum dolor sit amet</div>
                                    </div>
                                </div>
                    </div>
                    <div class="item">
                            <div class="main-image3">
                                    <div class="text">
                                        <div class="title">Lorem ipsum dolor</div>
                                        <div class="title2">Lorem ipsum dolor sit amet</div>
                                    </div>
                                </div>
                    </div>
                </div>
<script> 
var mainSlider = new MaxSlider('main-slider');

var mainSliderInterval;
changeMainSlider();

function changeMainSlider() {
    mainSliderInterval = setInterval(function () {
        mainSlider.nextItem();
    }, 5000);
}

     var main_slider_el = document.getElementById('main-slider');
      main_slider_el.addEventListener('mouseenter', function () {
          clearInterval(mainSliderInterval);
        });
        main_slider_el.addEventListener('mouseleave', function () {
            changeMainSlider();
        });
function MaxSlider(id) {
    this.id = id;   // main-slider
    var first_item = document.querySelector('#' + this.id + ' .item:first-child');
    first_item.classList.add('current');

    this.nextItem = function () {
        var currentEl = document.querySelector('#' + this.id + ' .current');
        currentEl.classList.remove('current');
        if (currentEl.nextElementSibling) {
            currentEl.nextElementSibling.classList.add('current');
        }
        else {
            first_item.classList.add('current');
        }
    };

}
</script>

对于每个“主图像”类，我在 CSS 和 slider 中添加了不同的背景图像:

.max-slider .item {
    display: none;
}
.max-slider .item.current {
    display: block;
}

或者只是添加内联样式，background-image:(url)每<div class="main-image