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>

如何在javascript中使背景成为幻灯片

1 个答案: