페이드 전환 효과 추가 및 자동 이미지 변경

안녕하세요 저는 JavaScript를 처음 사용하고 있으며 개발중인이 코드에 대한 솔루션을 만드는 데 어려움이 있습니다.
슬라이드 쇼 (다른 이미지로 변경되는 이미지)에 페이드 전환 효과를 추가해야합니다. 이미 존재하는 버튼 외에도 이미지가 자동으로 변경됩니다.
편집 : 다음은 전체 코드는 I (@albert)는 조각에 코드를 넣어 그냥 건너 와서 처음 두 이미지 ...페이드 전환 효과 추가 및 자동 이미지 변경

var slideIndex = 1; 
 
    showDivs(slideIndex); 
 
    function plusDivs(n) { 
 
    showDivs(slideIndex += n); 
 
    } 
 

 
    function currentDiv(n) { 
 
    showDivs(slideIndex = n); 
 
    } 
 
    function showDivs(n) { 
 
    var i; 
 
    var x = document.getElementsByClassName("slides"); 
 
    var dots = document.getElementsByClassName("active"); 
 
    if (n > x.length) {slideIndex = 1}  
 
    if (n < 1) {slideIndex = x.length} 
 
    for (i = 0; i < x.length; i++) { 
 
    x[i].style.display = "none"; 
 
    } 
 
    for (i = 0; i < dots.length; i++) { 
 
    dots[i].className = dots[i].className.replace(" white", ""); 
 
    } 
 
    x[slideIndex-1].style.display = "block"; 
 
    dots[slideIndex-1].className += " white"; 
 
    }

.circle{ 
 
    height:9px; 
 
    width:9px; 
 
    padding:0; 
 
    background-color:#000; 
 
    } 
 
    .container{ 
 
      position:relative; 
 
       max-width:800px; 
 
       max-height:350px; 
 
       overflow:hidden; 
 
    } 
 
    .centered{ 
 
      text-align:center; 
 
       margin-bottom:16px; 
 
       font-size:18px; 
 
       color:white; 
 
      position:absolute; 
 
       left:0; 
 
       bottom:0;    
 
    } 
 
    .left-arrow{ 
 
      float:left; 
 
       padding-left:16px; 
 
       cursor:pointer 
 
    } 
 
    .right-arrow{ 
 
      float:right; 
 
       padding-right:16px; 
 
       cursor:pointer 
 
    } 
 
    .arrow:hover{ 
 
       color:#b4aa50; 
 
    } 
 
    .arrow{ 
 
      -webkit-transition:background-color .3s,color .15s,box-shadow 
 
    .3s,opacity 0.3s; 
 
      transition:background-color .3s,color .15s,box-shadow 
 
    .3s,opacity 0.3s; 
 
    } 
 
    .circle-b{ 
 
       border:1px solid #fff; 
 
      background-color:transparent; 
 
        -webkit-transition:background-color .3s,color .15s,box-shadow 
 
    .3s,opacity 0.3s; 
 
        transition:background-color .3s,color .15s,box-shadow 
 
    .3s,opacity 0.3s; 
 
    } 
 
    .circle-b:hover{ 
 
       color:#000; 
 
       background-color:#fff;     
 
    } 
 

 
    .white{ 
 
       color:#000;background-color:#fff} 
 
    }

<div class="container"> 
 
    
 
    <img class="slides" src="https://i.stack.imgur.com/b9ukx.png" style="width:100%"> 
 
    <img class="slides" src="https://i.stack.imgur.com/wx8jF.png" style="width:100%"> 
 
    
 
     <div class="centered" style="width:100%"> 
 
      <div class="left-arrow arrow" onclick="plusDivs(-1)">&#10094</div> 
 
      <div class="right-arrow arrow" onclick="plusDivs(1)">&#10095</div> 
 
      <span class="circle active circle-b " onclick="currentDiv(1)"> </span> 
 
      <span class="circle active circle-b " onclick="currentDiv(2)"> </span> 
 
    </div> 
 
    </div>

출처

2016-08-09 Pablit0

이것은 순수 CSS에서 가능합니다. 당신은 그 해결책을 신경 써야 할까? 아니면 자바 스크립트가 필요한가? – albert

를 잡고

내가 쓴 처음부터 : https://jsfiddle.net/bartlomiej/kdg581sL/ (작동을 보려면 자바 설정에서 load type ~ no wrap - in <body>으로 설정해야합니다)

나는 그것이 당신이 달성하기를 원하는 것입니다.

우선 slideIndex의 초기 값을 0으로 설정합니다.

var slideIndex = 0;

그리고 length 해당 배열 slides 변수 설정 길이로 이미지 요소의 배열을 저장한다. stateIndex 정의 이미지 요소

var slides = document.getElementById('slides').children 
var length = slides.length

다음 행 집합 클래스 active.

showPrevSlide() 슬라이드가 처음이 아닌 경우에만 이전 슬라이드로 클래스 active을 설정

setActiveSlide(slideIndex);

그런 다음 우리는 세 가지 기능이 필요합니다. 슬라이드는 마지막이 아닌 경우에만 다음 슬라이드로 클래스 active을 설정

function showPrevSlide() { 
    if (slideIndex - 1 != -1) { 
    slideIndex -= 1; 
    } 

    setActiveSlide(slideIndex); 
}

showNextSlide(). 모든 이미지 요소를 반복하고 index에 정의 된 이미지 요소에 active 클래스를 추가

function showNextSlide() { 
    if (slideIndex + 1 < length) { 
    slideIndex += 1; 
    } 

    setActiveSlide(slideIndex); 
}

그리고 마지막으로 setActiveSlide().

function setActiveSlide(index) { 
    for (var i = 0; i < length; i++) { 
    if (index == i) { 
     slides[i].className += ' active'; 
    } else { 
     slides[i].className = 'slide'; 
    } 
    } 
}

는 transition 및 opacity CSS 속성을 사용한다 슬라이드에 페이드 전환 효과에 도달합니다. position을 absolute으로 설정하여 이미지가 서로 배치되도록해야합니다.

.slide { 
position: absolute; 
opacity: 0; 
transition: 1s; 
}

및 active 클래스 스타일.

.slide.active { 
    opacity: 1; 
}

내 답변으로 도움이 되었기를 바랍니다.

편집 : 무한 방법으로 슬라이드를 변경하려면 showPrevSlide()과 showNextSlide()을 약간 편집해야합니다.

function showPrevSlide() { 
    if (slideIndex - 1 == -1) { 
    slideIndex = length - 1; 
    } else { 
    slideIndex -= 1; 
    } 

    setActiveSlide(slideIndex); 
} 

function showNextSlide() { 
    if (slideIndex + 1 < length) { 
    slideIndex += 1; 
    } else { 
    slideIndex = 0; 
    } 

    setActiveSlide(slideIndex); 
}

그리고 당신은 이미지를 변경하려는 경우 자동으로 단지 setInterval를 사용합니다. 예 : setInterval(function() { showNextSlide() }, 1000);1000의 시간은 ms입니다.

출처

2016-08-10 02:10:39

도움 주셔서 감사합니다. 이 코드에 자동 이미지 변경 만 있으면됩니다. 가능한가? – Pablit0

나는 이미지를 바꾸기 위해 "무한한"가능성이 필요하다. (마지막 이미지가 활성화되었을 때 오른쪽 화살표를 클릭하면 첫 번째 코드에서 코드가 다시 시작되고 왼쪽 화살표와 동일합니다.) – Pablit0

내 대답을 편집하고 원하는 기능을 구현했습니다. –

페이드 전환 효과 추가 및 자동 이미지 변경

답변

관련 문제