Question

有3个css类/阶段。

活动类是显示的当前背景。

非活动类被赋予先前的背景。它会使背景滑出屏幕左侧。

传输类在收到非活动类后被赋予后台。传输类将背景移回屏幕右侧。

由于某种原因，滑块完全忽略了非活动类。背景永远不会滑到屏幕左侧。

var slides = document.getElementsByClassName('bg');

var i = 0;

// When page loads show first background
(function() {
    slides[i].className += ' active';

    i++;
})();

function changeSlide() {
    // Slide previous slide to the left of the screen
    if(i === 0) {
        slides[2].className = 'bg unactive';
    }
    else {
        slides[i - 1].className = 'bg unactive';
    }

    // Slide the current slide in from the right of the screen
    slides[i].className += ' active';

    // Make the slide go back to the right of the screen
    if(i === 0) {
        slides[2].className = 'bg transport';

        slides[2].className = 'bg';
    }
    else {
        slides[i - 1].className = 'bg transport';

        slides[i - 1].className = 'bg';
    }

    i++

    if(i === slides.length) {
        i = 0;
    }
}

setInterval(changeSlide, 2000);

* {
    margin: 0;
    padding: 0;
}

html, body, .bg {
    width: 100%;
    height: 100%;
}

.bg {
    position: absolute;
    left: 100%;
    background-color: tan;
    -webkit-transition: all 0.5s linear;
    -o-transition: all 0.5s linear;
    -moz-transition: all 0.5s linear;
    transition: all 0.5s linear;
}

/* The background that is shown */
.active {
    position: absolute;
    left: 0;
}

/* Make the background go to the left of the screen */
.unactive {
    position: absolute;
    left: -100%;  
}

/* Hide the background and make it go back to the right of the screen */
.transport {
    display: none;
    position: absolute;
    left: 100%;
    z-index: -1;
}

<!-- background 1 -->
<div class="bg" style="background-image: url(https://upload.wikimedia.org/wikipedia/commons/thumb/a/a9/Birnbaum_am_Lerchenberg_retouched.jpg/310px-Birnbaum_am_Lerchenberg_retouched.jpg)">  
</div>

<!-- background 2 -->
<div class="bg" style="background-image: url(https://cdn.pixabay.com/photo/2015/03/29/01/54/tree-696839_960_720.jpg)">  
</div>

<!-- background 3 -->
<div class="bg" style="background-image: url(http://www.slate.com/content/dam/slate/articles/health_and_science/science/2017/06/170621_SCI_TreePlantingHoax.jpg.CROP.promo-xlarge2.jpg)"></div>

查看此codepen。我有相同的代码，除了我注释掉一个javascript代码块。观看幻灯片进出。这就是我想要的。但我希望滑块无限重复，永不停止。

https://codepen.io/anon/pen/aVoNNd

Answer 1

您正在unactive覆盖slides[ ].className = 'bg';以下几行（与transport相同），因此从未应用过。{/ p>

我还必须更改一些z-index值并删除一些东西以使其工作。（参见代码中的注释）

var slides = document.getElementsByClassName('bg');

var i = 0;

// When page loads show first background
(function() {
    slides[i].className += ' active';

    i++;
})();

function changeSlide() {
    // Slide previous slide to the left of the screen
    if(i === 0) {
        slides[slides.length-1].className = 'bg unactive';//Changed 2 to slides.length-1 to avoid hardcoding values
    }
    else {
        slides[i - 1].className = 'bg unactive';
    }

    // Slide the current slide in from the right of the screen
    slides[i].className = 'bg active';// removed += to override transport

    // Make the slide go back to the right of the screen
    
    // prepare NEXT slide
    if(i === slides.length-1) {
        slides[0].className = 'bg transport';

        //slides[2].className = 'bg';    // dont override transport
    }
    else {
        slides[i + 1].className = 'bg transport';

        //slides[i - 1].className = 'bg';    // dont override transport
    }

    i++

    if(i === slides.length) {
        i = 0;
    }
}

setInterval(changeSlide, 2000);

* {
    margin: 0;
    padding: 0;
}

html, body, .bg {
    width: 100%;
    height: 100%;
}

.bg {
    position: absolute;
    left: 100%;
    background-color: tan;
    -webkit-transition: all 0.5s linear;
    -o-transition: all 0.5s linear;
    -moz-transition: all 0.5s linear;
    transition: all 0.5s linear;
}

/* The background that is shown */
.active {
    position: absolute;
    left: 0;
}

/* Make the background go to the left of the screen */
.unactive {
    position: absolute;
    left: -100%;  
    z-index: -1; /*added*/
}

/* Hide the background and make it go back to the right of the screen */
.transport {
    /*display: none;*/
    position: absolute;
    left: 100%;
    z-index: -2; /*changed to -2*/
}

<!-- background 1 -->
<div class="bg" style="background-image: url(https://upload.wikimedia.org/wikipedia/commons/thumb/a/a9/Birnbaum_am_Lerchenberg_retouched.jpg/310px-Birnbaum_am_Lerchenberg_retouched.jpg)">  
</div>

<!-- background 2 -->
<div class="bg" style="background-image: url(https://cdn.pixabay.com/photo/2015/03/29/01/54/tree-696839_960_720.jpg)">  
</div>

<!-- background 3 -->
<div class="bg" style="background-image: url(http://www.slate.com/content/dam/slate/articles/health_and_science/science/2017/06/170621_SCI_TreePlantingHoax.jpg.CROP.promo-xlarge2.jpg)"></div>

香草Javascript滑块无法正常工作

1 个答案: