슬라이드 쇼가 작동하지 않습니다.

Question

(이 질문에 답변이 있으면 죄송합니다 !!). 어쨌든 한 페이지에 두 개의 슬라이드 쇼를 만들려고합니다. 오직 하나만 보여줍니다. 마찬가지로 두 번째 코드에 대한 코드를 모두 추가 했으므로 첫 번째 코드 만 페이지에 표시됩니다.

나는 코드를 기본으로 유지할 수 있지만 문제가되는 경우 javascript로 무엇이든 할 수 있습니다.

자바 스크립트. 나는 (죄송합니다 다시) 무엇을 의미하는지 확실하지 않다 그러나 그것은 하나 개의 배너

<!-- script for slideshow ((copied from http://www.w3schools.com/w3css/w3css_slideshow.asp!)) --> 
<script> 
var myIndex = 0; 
carousel(); 



function carousel() { 
    var i; 
    var x = document.getElementsByClassName("mySlides"); 
    for (i = 0; i < x.length; i++) { 
     x[i].style.display = "none"; 
    } 
    myIndex++; 
    if (myIndex > x.length) {myIndex = 1}  
    x[myIndex-1].style.display = "block"; 
    setTimeout(carousel, 1000); <!-- time between slide change --> 

    } 
</script> 

HTML 코드 작동 - (다른 사업부에 노트 나는 그 두 '슬라이드 쇼'사이의 코드를 복사 한 두 번째 슬라이드 쇼 그리고 이것은 CSS (단지 관련 용기 사양)입니다)

<!--slideshow--> 
<div class="slideshow-container"> 
<img class="mySlides" src="images/2img1.jpg" alt="2img1.jpg"> 
<img class="mySlides" src="images/2img2.jpg" alt="2img2.jpg"> 
<img class="mySlides" src="images/2img3.jpg" alt="2img3.jpg"> 
<img class="mySlides" src="images/2img4.jpg" alt="2img4.jpg"> 
<img class="mySlides" src="images/2img5.jpg" alt="2img5.jpg"> 
<img class="mySlides" src="images/2img6.jpg" alt="2img6.jpg"> 
</div> 
    <!--END slideshow--> 

사진 파일 이름을 변경했습니다.

/* Slideshow container */ 
.slideshow-container { 
    max-width: 100%; 
    position: relative; 
    margin: auto; 
} 

.mySlides { 
    position: relative; 
    vertical-align: middle; 
    background-repeat: no-repeat; 
    background-size: cover; 
    height: 200px; 
    width: 500px; 
    margin: auto; 
    border-radius: 25px; 
} 

감사합니다.

Answer 1

div를 동일한 요소로 복사하고 클래스 이름 만 남겨두면 슬라이드 쇼가 하나만 표시된다는 의미가됩니다. 그러나 이미지 세트를 재생하는 슬라이드 쇼 여야합니다 (또는 세트가 똑같다). 그것은 다소 간단한 수정입니다. 첫째, 이미지의 두 번째 세트에 대한 클래스 이름을 변경, 그래서 뭔가처럼 HTML은 다음과 같습니다 그럼 당신은 기본적으로 하나의 슬라이드 쇼에 필요한 코드를 두배로 할 수있다

<div class="slideshow-container"> 
<img class="mySlides" src="images/2img1.jpg" alt="2img1.jpg"> 
<img class="mySlides" src="images/2img2.jpg" alt="2img2.jpg"> 
<img class="mySlides" src="images/2img3.jpg" alt="2img3.jpg"> 
<img class="mySlides" src="images/2img4.jpg" alt="2img4.jpg"> 
<img class="mySlides" src="images/2img5.jpg" alt="2img5.jpg"> 
<img class="mySlides" src="images/2img6.jpg" alt="2img6.jpg"> 
</div> 

<div class="slideshow-container"> 
<img class="mySlides2" src="images/2img1.jpg" alt="2img1.jpg"> 
<img class="mySlides2" src="images/2img2.jpg" alt="2img2.jpg"> 
<img class="mySlides2" src="images/2img3.jpg" alt="2img3.jpg"> 
<img class="mySlides2" src="images/2img4.jpg" alt="2img4.jpg"> 
<img class="mySlides2" src="images/2img5.jpg" alt="2img5.jpg"> 
<img class="mySlides2" src="images/2img6.jpg" alt="2img6.jpg"> 
</div> 

, 두 번째 세트의 클래스를 사용하도록 설정 의 이미지. 당신의 머리에 사진 힘들 수 있습니다,하지만 당신은 여기에서 볼 수 있습니다 : 당신은 내가 yIndex 변수를 생성하고, (대신 mySlides의) .mySlides2 요소 Y를 사용하여 볼 수 있습니다

var xIndex = 0, yIndex = 0; 
carousel(); 

function carousel() { 
    var i; 
    var x = document.getElementsByClassName("mySlides"); 
    var y = document.getElementsByClassName("mySlides2"); 

    for (i = 0; i < x.length; i++) { 
    x[i].style.display = "none"; 
    } 

    for (i = 0; i < y.length; i++) { 
    y[i].style.display = "none"; 
    } 

    xIndex++; 
    if (xIndex > x.length) {xIndex = 1}  
    x[xIndex-1].style.display = "block"; 

    yIndex++; 
    if(yIndex > y.length) {yIndex = 1} 
    y[yIndex-1].style.display = "block"; 

    setTimeout(carousel, 1000); 
} 

. x 대신에 y에 대한 루프를 두 배로 늘리고 xIndex와 동일한 방식으로 yIndex를 증가시킵니다 (이미지의 최대 개수를 초과하고 표시 할 다음 이미지를 설정하는 경우 하나를 설정하는 것과 동일).

여기에 (물론, 어떤 의미에서 작업, 이미지가 모두 깨진되지만, 스크립트는 작동) 작업 바이올린의 : https://jsfiddle.net/cchvncnd/

Answer 2

멋진 대답 @ mark.hch에서. 그러나 현재 클래스의 스틱을 원한다면. 그리고 기능이 자동으로 반복하자,이 코드를 사용할 수 있습니다, 그것은

var myIndex = []; 
 
carousel(); 
 

 
function carousel() { 
 
    var i, j; 
 
    var con = document.getElementsByClassName("slideshow-container"); 
 
    for (j = 0; j < con.length; j++) { 
 
    myIndex[j] = myIndex[j] || 0; 
 
    for (i = 0; i < con[j].children.length; i++) { 
 
     con[j].children[i].style.display = "none"; 
 
    } 
 
    if (myIndex[j] >= con[j].children.length) { 
 
     myIndex[j] = 0; 
 
    }  
 
    con[j].children[myIndex[j]].style.display = "block"; 
 
    myIndex[j] ++; 
 
    } 
 
    setTimeout(carousel, 1000); <!-- time between slide change -->  
 
}

.slideshow-container { 
 
    max-width: 100%; 
 
    position: relative; 
 
    margin: auto; 
 
    display: inline-block; 
 
    height: 200px; 
 
    width: 500px; 
 
    border: 1px solid green; 
 
} 
 
.mySlides { 
 
    position: relative; 
 
    vertical-align: middle; 
 
    background-repeat: no-repeat; 
 
    background-size: cover; 
 
    border-radius: 25px; 
 
}

<div class="slideshow-container"> 
 
    <img class="mySlides" src="images/2img1.jpg" alt="2img1.jpg"> 
 
    <img class="mySlides" src="images/2img2.jpg" alt="2img2.jpg"> 
 
    <img class="mySlides" src="images/2img3.jpg" alt="2img3.jpg"> 
 
    <img class="mySlides" src="images/2img4.jpg" alt="2img4.jpg"> 
 
    <img class="mySlides" src="images/2img5.jpg" alt="2img5.jpg"> 
 
    <img class="mySlides" src="images/2img6.jpg" alt="2img6.jpg"> 
 
</div> 
 
<div class="slideshow-container"> 
 
    <img class="mySlides" src="images/1img1.jpg" alt="1img1.jpg"> 
 
    <img class="mySlides" src="images/1img2.jpg" alt="1img2.jpg"> 
 
    <img class="mySlides" src="images/1img3.jpg" alt="1img3.jpg"> 
 
    <img class="mySlides" src="images/1img4.jpg" alt="1img4.jpg"> 
 
    <img class="mySlides" src="images/1img5.jpg" alt="1img5.jpg"> 
 
    <img class="mySlides" src="images/1img6.jpg" alt="1img6.jpg"> 
 
</div>