javascript - 如何在javascript中将背景设为幻灯片

Question

我尝试使用 javascript 将背景设为幻灯片，但它无法正常工作。除了刷新后图像第一次发生变化之外，一切都很完美。然而，图像第一次改变时，它会出现故障，第一个消失的图像会重新出现一瞬间，然后再次消失。我该如何解决？这是代码:

//The javascript code for the slideshow

//Create the slide show for the background
var backgroundImgS = "images/background1.JPG", backgroundImg2S = "images/background2.JPG", backgroundImg3S = "images/background3.JPG";

var backgroundImg = document.getElementById("backgroundImg"), backgroundImg2 = document.getElementById("backgroundImg2");
/*If the background slide show isn't transitioning, transNum increments every cycle. When transNum gets to a certain number, trans becomes true as the slide show starts to transition.
transNum is in that case returned to 0, and opacity goes down 10 per cycle (opacity is the opacity of backgroundImg). When opacity is at 0, backgroundImg is assigned the src of
backgroundImg2, and backgroundImg's opacity is returned to 100. After that, backgroundImg2's src is changed the the next image. imgNum determines which image the main background
image should contain.*/
var transNum = 0, opacity = 100, trans = false, imgNum = 0;

window.setInterval(function(){
    if(!trans) transNum++;//if the slide show isn't transitioning, increment transNum
    if(transNum == 100){//if transNum has counted to 100, start the transition of the background image
        transNum = 0;
        trans = true;
    }

    if(trans) opacity -= 10;//make the first image less transparent
    if(opacity == 0){
        trans = false;
        imgNum++;
        if(imgNum > 2) imgNum = 0;

        if(imgNum == 0){
            backgroundImg.src = backgroundImgS;
            backgroundImg2.src = backgroundImg2S;
        } else if(imgNum == 1){
            backgroundImg.src = backgroundImg2S;
            backgroundImg2.src = backgroundImg3S;
        } else if(imgNum == 2){
            backgroundImg.src = backgroundImg3S;
            backgroundImg2.src = backgroundImgS;
        } else{
            document.write("There was an error while running this page");
        }

        opacity = 100;
    }

    backgroundImg.style.opacity = opacity / 100;
    backgroundImg.style.filter = "alpha(opacity=" + opacity + ")";
}, 40);

Answer 1

从 codepen 中查看这个工作示例。

Pure JavaScript BackGround Image Slider

  var slideCount = document.querySelectorAll('.slider .slide-item').length;
  var slideWidth = document.querySelectorAll('.slider-outer')[0].offsetWidth;
  var slideHeight = document.querySelectorAll(".slider-outer")[0].offsetHeight;

  var sliderUlWidth = slideCount * slideWidth;
  document.querySelectorAll('.slider')[0].style.cssText = "width:" + sliderUlWidth + "px";

  for (var i = 0; i < slideCount; i++) {
    document.querySelectorAll('.slide-item')[i].style.cssText = "width:" + slideWidth + "px;height:" + slideHeight + "px";
  }

  setInterval(function() {
    moveRight();
  }, 3000);
  var counter = 1;

  function moveRight() {
    var slideNum = counter++
      if (slideNum < slideCount) {
        var transformSize = slideWidth * slideNum;
        document.querySelectorAll('.slider')[0].style.cssText = 
          "width:" + sliderUlWidth + "px; -webkit-transition:all 800ms ease; -webkit-transform:translate3d(-" + transformSize + "px, 0px, 0px);-moz-transition:all 800ms ease; -moz-transform:translate3d(-" + transformSize + "px, 0px, 0px);-o-transition:all 800ms ease; -o-transform:translate3d(-" + transformSize + "px, 0px, 0px);transition:all 800ms ease; transform:translate3d(-" + transformSize + "px, 0px, 0px)";

      } else {
        counter = 1;
        document.querySelectorAll('.slider')[0].style.cssText = "width:" + sliderUlWidth + "px;-webkit-transition:all 800ms ease; -webkit-transform:translate3d(0px, 0px, 0px);-moz-transition:all 800ms ease; -moz-transform:translate3d(0px, 0px, 0px);-o-transition:all 800ms ease; -o-transform:translate3d(0px, 0px, 0px);transition:all 800ms ease; transform:translate3d(0px, 0px, 0px)";
      }

  }

body{
  margin:0;
  padding:0;
}
.main{
  width:100%;
  height:400px;
  margin: 0 auto;
}
.slider-outer{
   height:100% !important;
   
  overflow:hidden;
}
.slider{
 
    width: 100%;
    height: 100%;
    
}
.slide-image{
  width: 100%;
    height: 100%;
   display:block;
    color: transparent;
    background-size: cover;
    -moz-background-size: cover;
    -ms-background-size: cover;
    -o-background-size: cover;
    -webkit-background-size: cover;
    background-position: 50% 50%;
    background-repeat: none;
}
.slider .slide-item{
  float:left;
    padding: 0;
    margin: 0;
}
.clear{
  clear:both;
}

<div class="main">
  <div class="slider-outer">
    <div class="slider">
      <div class="slide-item"><span class="slide-image" style="background-image: url(http://placehold.it/1920x1000/FE0000);"></span></div>
      <div class="slide-item"><span class="slide-image" style="background-image: url(http://placehold.it/1920x1000/FEE000);"></span></div>
      <div class="slide-item"><span class="slide-image" style="background-image: url(http://placehold.it/1920x1000/FE00C7);"></span></div>
    
      
    </div>
  </div>
</div>