>

position: absolute; 로 설정된 배너에 3 개의 이미지가 있습니다.  서로의 위에 쌓여 있습니다. 내가 원하는 것은 setTimeout() 를 사용하는 것이 었습니다.  그리고 fadeOut()  그리고 fadeIn()  표시되는 세 가지 다른 이미지를 번갈아 표시하는 방법입니다. 뭔가 일어나고 있지만 실제로 내가 원하는 것은 아닙니다. 대신 각 이미지 사이 순조롭게 전환의 첫 결코 전혀 등장하지, 단순히 마지막 이미지와 두 번째 사이 등 고르지 토글 다시하고있다. 사용중인 코드는 다음과 같습니다.

setInterval(function()
        {
          setTimeout($("#banner_city").fadeOut(), 5000);
          setTimeout($("#banner_dispatch").fadeOut(), 5000);
          setTimeout($("#banner_vehicles").fadeOut(), 5000);
          setTimeout($("#banner_city").fadeIn(), 5000);
          setTimeout($("#banner_dispatch").fadeIn(), 5000);
          setTimeout($("#banner_vehicles").fadeIn(), 5000);
        }, 32401);

관련이 있는지 확실하지 않지만 여기에 html 가있는 경우를 대비하여  그리고 css  게다가. HTML :

<div id="banner">
  <img src="images/banner/city.jpg" id="banner_city" />
  <img src="images/banner/dispatch.jpg" id="banner_dispatch" />
  <img src="images/banner/vehicles.jpg" id="banner_vehicles" />
</div>

Css :

#banner {
  margin-top: 12px;
  position: relative;
  width: 833px;
  height: 237px;
}
#banner_city {
  position: absolute;
  right: 0;
  top: 0;
  width: 833px;
  height: 237px;
}
#banner_dispatch {
  position: absolute;
  right: 0;
  top: 0;
  width: 833px;
  height: 237px;
}
#banner_vehicles {
  position: absolute;
  right: 0;
  top: 0;
  width: 833px;
  height: 237px;
}

이것이 왜 그렇게 버그가 많은지에 대해 누가 밝힐 수 있을까요? 미리 감사드립니다.


  • 답변 # 1

    당신의 setInterval을 기본적으로 모든 것을 말하고있는 것은 당신이 원하는하지 않은, 동시에 페이드 아웃 페이드합니다.

    여기서 두 가지 접근법의 각 "단계"페이딩 3 개 별도의 간격이 있거나 보여 것의 트랙을 유지하기위한 일부 내부 카운터를 1 구간

    .

    첫번째 방법은 다음과 같습니다 :

    function fadeOne() {
      $("#banner_city").fadeOut();
      $("#banner_dispatch").fadeIn();
    };
    function fadeTwo() {
      $("#banner_dispatch").fadeOut();
      $("#banner_vehicles").fadeIn();
    }
    function fadeThree() {
      $("#banner_vehicles").fadeOut();
      $("#banner_city").fadeIn();
    }
    fadeOne();
    setInterval(fadeOne, 15000);
    setTimeout(() => {
      fadeTwo();
      setInterval(fadeTwo, 15000);
    }, 5000);
    setTimeout(() => {
      fadeThree();
      setInterval(fadeThree, 15000);
    }, 10000);
    
    

    이것은 사실상 15 초 간격으로 호출되는 세 가지 기능이며, 두 번째 및 세 번째 기능에 5/10 초 지연됩니다.

    두 번째 접근 방식은 이들을 결합합니다 :

    let count = 0;
    function fade() {
      switch (count++ % 3) {
        case 0:
          fadeOne();
          return;
        case 1:
          fadeTwo();
          return;
        case 2:
          fadeThree();
          return;
       }
    }
    fade();
    setInterval(fade, 5000);
    
    

  • 답변 # 2

    코드는 모든 시간 초과를 동시에 시작하므로 모두 동시에 완료됩니다. 다음과 같이 서로 실행되도록 중첩시켜야합니다.

    setTimeout(function() {
        // Do something
        // ...
        setTimeout(function() {
            // Do something else
            // ...
            setTimeout(...)
        }, 1000)
    }, 1000)
    
    

    이것은 매우 지저분하므로 여기에 필요한 작업을 수행하는 또 다른 방법이 있습니다.

    // Get all the image elements
    var images = $(".banner-image");
    // Hide all the images
    images.hide();
    // Start the cycle
    cycle();
    setInterval(cycle, 1000);
    var index = 0;
    function cycle() {
      // Fade out all images
      images.fadeOut();
      // Fade in the next image
      images.eq(index).fadeIn();
      // Increment the index
      index++;
      // Reset index after cycling through all images
      if ((index % images.length) === 0) index = 0;
    }
    
    
    이 코드는 HTML에 포함하는 많은 이미지 요소에 적용됩니다. 라이브 데모로 진행 중입니다.

    PS : CSS 클래스를 사용하여 동일한 스타일을 여러 HTML 요소에 적용 할 수 있습니다.

관련 자료

  • 이전 여러 작업 항목 계층을 통한 TFS 2013 쿼리
  • 다음 expo - 스낵에서 로컬로 기존 React Native 프로젝트를 실행하는 방법이 있습니까?