자동 자바 스크립트 슬라이드 쇼에서 화살표를 클릭하면 공백이 생깁니다

Question

화살표를 눌렀을 때 매뉴얼로 전환하는 w3 css를 기반으로하는 자동 자바 슬라이드 쇼를 만들려고합니다. 이 외에도 처음부터 이전 또는 다음 화살표를 클릭하지 않으면 슬라이드 쇼가 2 개의 루프로 실행됩니다.

페이지가로드되면 슬라이드 쇼는 자동 모드입니다. 그 때 이전 또는 다음 화살표를 클릭하면 해당 시간에 슬라이드에서 멈춰야합니다. 대신보기 흉한 흰색 화면을 보여줍니다. 나는 화살표를 클릭 할 때 일시 정지 기능을 수행하려고 시도 할 변수 인 pause을 추가하고 있습니다. 내가 뭘 잘못하고 있는지 말해줘. 참고 - 저는 Javascript를 처음 사용합니다.

아래는 내 조각입니다 -

var paused = false; 
 
var myIndex = 0; 
 
var counter = 0; 
 
var maxLength = 0; 
 
var loops = 2; 
 
var interval = 1000; //for testing purposes 
 
function carousel() { 
 
    var x = document.querySelectorAll(".mySlides"); //using modern querySelectorAll 
 
    maxLength = x.length * loops; //times 2 for two loops  
 

 
    //optimalization here - borrowing Array forEach to loop over node list 
 
    Array.prototype.forEach.call(x, function(element) { 
 
    element.style.display = "none"; 
 
    }); 
 

 
    counter++; //adding counter 
 
    if (paused === false) { 
 
    if (myIndex >= x.length) { 
 
    myIndex = 0 
 
    }; //reset this to zero indexing 
 
    x[myIndex].style.display = "block"; //show the slide 
 
    if (counter <= maxLength) //ie counter <= 10, execute 
 
    { 
 
    myIndex++; //add index with every pass 
 
    setTimeout(carousel, interval); 
 
    Array.prototype.forEach.call(x, function(element) { 
 
    element.classList.remove("w3-animate-fading"); //remove the fading 
 
    }); 
 
    } 
 
    } 
 
    else 
 
    { 
 
    
 
    } 
 

 
} 
 

 
carousel(); 
 

 
var slideIndex = 1; 
 
showDivs(slideIndex); 
 

 
function plusDivs(n) { 
 
    showDivs(slideIndex += n); 
 
    paused = true; 
 
} 
 

 
function showDivs(n) { 
 
    var i; 
 
    var x = document.getElementsByClassName("mySlides"); 
 
    if (n > x.length) {slideIndex = 1}  
 
    if (n < 1) {slideIndex = x.length} 
 
    for (i = 0; i < x.length; i++) { 
 
    x[i].style.display = "none"; 
 
    } 
 
    x[slideIndex-1].style.display = "block"; 
 
}

.w3-content.w3-display-container { 
 
    margin-top: 100px; 
 
} 
 
    
 
button.w3-button.w3-display-left.w3-black { 
 
    position: relative; 
 
    left: -50px; 
 
} 
 
    
 
button.w3-button.w3-display-right.w3-black { 
 
    position: relative; 
 
    right: -118px; 
 
}

<link href="https://www.w3schools.com/w3css/4/w3.css" rel="stylesheet"/> 
 
<div class="w3-content w3-display-container " style="max-width:150px"> 
 

 
    <div class="w3-display-container w3-animate-fading mySlides"> 
 
     <a href="" \t target="_blank" title="slide1"> 
 
     <img class="" src="img01.jpg" \t style="width:100%"> 
 
     </a> 
 
     <div class="w3-display-bottomleft w3-large \t w3-container w3- 
 
    padding-16 w3-black"> 
 
     <a href="" target="_blank" title="slide1">Slide-1 (read more)</a> 
 
    </div> 
 
    </div> 
 

 
    <div class="w3-display-container w3-animate-fading mySlides"> 
 
     <a href="" target="_blank" title="slide2"> 
 
    <img class="" src="img02.jpg" style="width:100%"> 
 
    </a> \t 
 
    <div class="w3-display-bottomright w3-large w3-container w3-padding-16  
 
    w3-black"> 
 
     <a href="" target="_blank" title="slide2">Slide-2 (more)</a> 
 
    </div> 
 
    </div> 
 

 
    <div class="w3-display-container w3-animate-fading mySlides"> 
 
     <a href="" target="_blank" title="slide3"> 
 
    <img class="" src="img03.jpg" style="width:100%"> 
 
    </a> 
 
     <div class="w3-display-topleft w3-large w3-container 
 
      w3-padding-16 w3-black"> 
 
     <a href="" target="_blank" title="slide3">Slide-3 (read more)</a> 
 
     </div> 
 
    </div> 
 

 
    <div class="w3-display-container w3-animate-fading mySlides"> 
 
     <a href="" target="_blank" title="slide4"> 
 
    <img class="" src="img04.jpg" style="width:100%"> 
 
    </a> 
 
     <div class="w3-display-topright w3-large w3-container 
 
      w3-padding-16 w3-black"> 
 
     <a href="" target="_blank" title="slide4">Slide-4 (read more)</a> 
 
     </div> 
 
    </div> 
 

 
    <div class="w3-display-container w3-animate-fading mySlides"> 
 
     <a href="" target="_blank" title="slide5"> 
 
     <img class="" src="img05.jpg" style="width:100%"> 
 
     </a> 
 
     <div class="w3-display-middle w3-large w3-container \t 
 
      w3-padding-16 w3-black"> 
 
     <a href="" target="_blank" title="slide5">Slide-5 (read \t more)</a> 
 
     </div> 
 
    </div> 
 

 
    <button class="w3-button w3-display-left w3-black" 
 
    onclick="plusDivs(-1)">&#10094;</button> 
 
     <button class="w3-button w3-display-right w3-black" 
 
    onclick="plusDivs(1)">&#10095;</button> 
 

 
</div>

Answer 1

좋아, 그래서 슬라이드 쇼를 변경하고 여기에 업데이트 된 버전이며, 모든 것이 완벽하게 지금 작동하는 것 같군. 를 발급 https://jsfiddle.net/qhx93g1q/3/

//Changed index so 1 is actually first image, rather than starting at 0 index 
 
var index = 1; 
 
var paused = false; 
 
var slideShow = []; 
 
var counter = 0; 
 
var maxLength = 0; 
 
var loops = 2; 
 
var interval = 2000; //for testing purposes 
 

 
var x = document.getElementsByClassName("slideShow"); 
 
maxLength = x.length * loops; //times 2 for two loops 
 
    
 
for (i=0; i<x.length; i++) { 
 
    slideShow[i] = document.getElementsByClassName("slideShow")[i]; 
 
    slideShow[i].style.display = "none"; 
 
} 
 

 
slideShow[0].style.display = "block"; 
 

 
var slides = setInterval(function() { 
 
counter++; //adding counter 
 
    if (counter <= maxLength) //ie counter <= 10, execute 
 
    { 
 
    if (index < slideShow.length) { 
 
    
 
    index++; 
 
    showDivs(); 
 
    
 
    } 
 
    else { 
 
    index = 1; 
 
    showDivs(); 
 
\t } 
 
    } 
 
\t else { 
 
\t } 
 
},interval); 
 

 
function control(n) { 
 
    clearInterval(slides); 
 

 
    if (index+n > slideShow.length) { 
 
    index = 1; 
 
    } 
 
    else if (index+n <= 0) { 
 
    index = slideShow.length; 
 
    } 
 
    else { 
 
    index += n; 
 
    } 
 
    showDivs(); 
 
} 
 

 
function showDivs() { 
 
    //Hide all slideShow elements, and then show only the targeted element 
 
    for (i=1; i<=slideShow.length; i++) { 
 
    slideShow[i-1].style.display = "none"; 
 
    } 
 
    slideShow[index-1].style.display = "block"; 
 
}

.w3-content.w3-display-container { 
 
    margin-top: 100px; 
 
} 
 
    
 
button.w3-button.w3-display-left.w3-black { 
 
    position: relative; 
 
    left: -50px; 
 
} 
 
    
 
button.w3-button.w3-display-right.w3-black { 
 
    position: relative; 
 
    right: -118px; 
 
} 
 

 
.fadeIn { 
 
\t animation-name: fadeIn; 
 
\t animation-duration: 2s; 
 
\t animation-fill-mode: forwards; 
 
\t animation-timing-function: ease-out; 
 
} 
 
@keyframes fadeIn { 
 
\t from {opacity:0;} 
 
\t to {poacity:1;} 
 
}

<link href="https://www.w3schools.com/w3css/4/w3.css" rel="stylesheet"/> 
 

 
<div class="w3-content w3-display-container " style="max-width:150px"> 
 

 
    <div class="w3-display-container fadeIn slideShow"> 
 
     <a href="" \t target="_blank" title="slide1"> 
 
     <img class="" src="img01.jpg" \t style="width:100%"> 
 
     </a> 
 
     <div class="w3-display-bottomleft w3-large \t w3-container w3- padding-16 w3-black"> 
 
     <a href="" target="_blank" title="slide1">Slide-1 (read more)</a> 
 
    </div> 
 
    </div> 
 

 
    <div class="w3-display-container fadeIn slideShow"> 
 
     <a href="" target="_blank" title="slide2"> 
 
    <img class="" src="img02.jpg" style="width:100%"> 
 
    </a> \t 
 
    <div class="w3-display-bottomright w3-large w3-container w3-padding-16  w3-black"> 
 
     <a href="" target="_blank" title="slide2">Slide-2 (more)</a> 
 
    </div> 
 
    </div> 
 

 
    <div class="w3-display-container fadeIn slideShow"> 
 
     <a href="" target="_blank" title="slide3"> 
 
    <img class="" src="img03.jpg" style="width:100%"> 
 
    </a> 
 
     <div class="w3-display-topleft w3-large w3-container 
 
      w3-padding-16 w3-black"> 
 
     <a href="" target="_blank" title="slide3">Slide-3 (read more)</a> 
 
     </div> 
 
    </div> 
 

 
    <div class="w3-display-container fadeIn slideShow"> 
 
     <a href="" target="_blank" title="slide4"> 
 
    <img class="" src="img04.jpg" style="width:100%"> 
 
    </a> 
 
     <div class="w3-display-topright w3-large w3-container 
 
      w3-padding-16 w3-black"> 
 
     <a href="" target="_blank" title="slide4">Slide-4 (read more)</a> 
 
     </div> 
 
    </div> 
 

 
    <div class="w3-display-container fadeIn slideShow"> 
 
     <a href="" target="_blank" title="slide5"> 
 
     <img class="" src="img05.jpg" style="width:100%"> 
 
     </a> 
 
     <div class="w3-display-middle w3-large w3-container \t 
 
      w3-padding-16 w3-black"> 
 
     <a href="" target="_blank" title="slide5">Slide-5 (read \t more)</a> 
 
     </div> 
 
    </div> 
 

 
    <button class="w3-button w3-display-left w3-black" onclick="control(-1)"><</button> 
 
     <button class="w3-button w3-display-right w3-black" onclick="control(1)">></button> 
 

 
</div>