Javascriptで2つのスライドショーを切り替える

Question

私はスライドショーを持つWebページを持っています。スライドショーには3枚の写真があります。私はこのスライドショーと5つの異なる写真とを切り替えることができるページ上のボタンを持っていたいと思います。 JavaScriptでこのボタンをどのようにプログラムすればよいのですか？また、HTMLに2番目のスライドショーを追加するのはどこですか？

現在のHTML：

<div class="slideshow-container"> 
    <div class="mySlides fade"> 
    <div class="numbertext">1/3</div> 
    <img src="img1.jpg" style="width:100%"> 
    <div class="text">Caption Text</div> 
    </div> 

    <div class="mySlides fade"> 
    <div class="numbertext">2/3</div> 
    <img src="img2.jpg" style="width:100%"> 
    <div class="text">Caption Two</div> 
    </div> 

    <div class="mySlides fade"> 
    <div class="numbertext">3/3</div> 
    <img src="img3.jpg" style="width:100%"> 
    <div class="text">Caption Three</div> 
    </div> 

    <a class="prev" onclick="plusSlides(-1)">&#10094;</a> 
    <a class="next" onclick="plusSlides(1)">&#10095;</a> 
</div> 
<br> 

<div style="text-align:center"> 
    <span class="dot" onclick="currentSlide(1)"></span> 
    <span class="dot" onclick="currentSlide(2)"></span> 
    <span class="dot" onclick="currentSlide(3)"></span> 
</div> 
<button>Switch Slideshow</button> 

現在のCSS：

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

/* Next & previous buttons */ 
.prev, .next { 
    cursor: pointer; 
    position: absolute; 
    top: 50%; 
    width: auto; 
    margin-top: -22px; 
    padding: 16px; 
    color: white; 
    font-weight: bold; 
    font-size: 18px; 
    transition: 0.6s ease; 
    border-radius: 0 3px 3px 0; 
} 

/* Position the "next button" to the right */ 
.next { 
    right: 0; 
    border-radius: 3px 0 0 3px; 
} 

/* On hover, add a black background color with a little bit see-through */ 
.prev:hover, .next:hover { 
    background-color: rgba(0,0,0,0.8); 
} 

/* Caption text */ 
.text { 
    color: #f2f2f2; 
    font-size: 15px; 
    padding: 8px 12px; 
    position: absolute; 
    bottom: 8px; 
    width: 100%; 
    text-align: center; 
} 

/* Number text (1/3 etc) */ 
.numbertext { 
    color: #f2f2f2; 
    font-size: 12px; 
    padding: 8px 12px; 
    position: absolute; 
    top: 0; 
} 

/* The dots/bullets/indicators */ 
.dot { 
    cursor:pointer; 
    height: 13px; 
    width: 13px; 
    margin: 0 2px; 
    background-color: #bbb; 
    border-radius: 50%; 
    display: inline-block; 
    transition: background-color 0.6s ease; 
} 

.active, .dot:hover { 
    background-color: #717171; 
} 

/* Fading animation */ 
.fade { 
    -webkit-animation-name: fade; 
    -webkit-animation-duration: 1.5s; 
    animation-name: fade; 
    animation-duration: 1.5s; 
} 

@-webkit-keyframes fade { 
    from {opacity: .4} 
    to {opacity: 1} 
} 

@keyframes fade { 
    from {opacity: .4} 
    to {opacity: 1} 
} 

現在のJavaScript：事前に

var slideIndex = 1; 
showSlides(slideIndex); 

function plusSlides(n) { 
    showSlides(slideIndex += n); 
} 

function currentSlide(n) { 
    showSlides(slideIndex = n); 
} 

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

多くの感謝！

Answer 1

まず、スライドショーを動的に作成する必要があります。その場合に限り、異なるスライドを入れ替えることができます。私はあなたの既存のコードをリファクタリングしないようにしました。また、私はjQuery（私は個人的に使用する）を使用しませんでした。各スライドのマークアップを生成し、スライドdivに設定してください。ボタンがオーバーライドされないように内部divを作成する必要がありました。

var slideshowIndex = 1; 
 
var slideIndex = 1; 
 
var slideshows = [ 
 
    [ 
 
    'http://placehold.it/500x300/f00/0ff?text=Foo', 
 
    'http://placehold.it/500x300/0f0/f0f?text=Bar', 
 
    'http://placehold.it/500x300/00f/ff0?text=Baz' 
 
    ], [ 
 
    'http://placehold.it/500x300/f70/07f?text=Fizz', 
 
    'http://placehold.it/500x300/0f7/f07?text=Buzz', 
 
    'http://placehold.it/500x300/70f/7f0?text=Bang' 
 
    ] 
 
]; 
 
var buttonTextArr = [ 'Show Images', 'Show Pages' ]; 
 
function createSlides(slides) { 
 
    return slides.map(function(slide, index) { 
 
    return [ 
 
     '<div class="mySlides fade">', 
 
     '<div class="numbertext">' + (index + 1) + '/' + slides.length + '</div>', 
 
     '<img src="' + slide + '">', 
 
     '<div class="text">Caption #' + (index + 1) + '</div>', 
 
     '</div>' 
 
    ].join(''); 
 
    }).join(''); 
 
} 
 
function createDots(slides) { 
 
    return slides.map(function(slide, index) { 
 
    return '<span class="dot" onclick="currentSlide(' + (index + 1) + ')"></span>' 
 
    }).join(''); 
 
} 
 
function loadSlideshow(slides) { 
 
    document.getElementsByClassName('slideshow-slides')[0].innerHTML = createSlides(slides); 
 
    document.getElementsByClassName('dots')[0].innerHTML = createDots(slides); 
 
} 
 
function loadNextSlideshow() { 
 
    slideshowIndex = (slideshowIndex + 1) % 2; 
 
    loadSlideshow(slideshows[slideshowIndex]); 
 
    slideIndex = 1; // Reset index 
 
    showSlides(slideIndex); 
 
    document.getElementsByClassName('switch')[0].innerHTML = buttonTextArr[slideshowIndex]; 
 
} 
 

 
loadNextSlideshow(); // Load the slideshow 
 

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

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

 
/* Next & previous buttons */ 
 
.prev, .next { 
 
    cursor: pointer; 
 
    position: absolute; 
 
    top: 50%; 
 
    width: auto; 
 
    margin-top: -22px; 
 
    padding: 16px; 
 
    color: white; 
 
    font-weight: bold; 
 
    font-size: 18px; 
 
    transition: 0.6s ease; 
 
    border-radius: 0 3px 3px 0; 
 
    text-shadow: 0.05em 0.05em 0.25em #000; 
 
} 
 

 
/* Position the "next button" to the right */ 
 
.next { 
 
    right: 0; 
 
    border-radius: 3px 0 0 3px; 
 
} 
 

 
/* On hover, add a black background color with a little bit see-through */ 
 
.prev:hover, .next:hover { 
 
    background-color: rgba(0, 0, 0, 0.8); 
 
} 
 

 
/* Caption text */ 
 
.text { 
 
    color: #f2f2f2; 
 
    font-size: 15px; 
 
    padding: 8px 12px; 
 
    position: absolute; 
 
    bottom: 8px; 
 
    width: 100%; 
 
    text-align: center; 
 
} 
 

 
/* Number text (1/3 etc) */ 
 
.numbertext { 
 
    color: #f2f2f2; 
 
    font-size: 12px; 
 
    padding: 8px 12px; 
 
    position: absolute; 
 
    top: 0; 
 
} 
 

 
/* The dots/bullets/indicators */ 
 
.dot { 
 
    cursor: pointer; 
 
    height: 13px; 
 
    width: 13px; 
 
    margin: 0 2px; 
 
    background-color: #bbb; 
 
    border-radius: 50%; 
 
    display: inline-block; 
 
    transition: background-color 0.6s ease; 
 
} 
 
.active, .dot:hover { 
 
    background-color: #717171; 
 
} 
 

 
/* Fading animation */ 
 
.fade { 
 
    -webkit-animation-name: fade; 
 
    -webkit-animation-duration: 1.5s; 
 
    animation-name: fade; 
 
    animation-duration: 1.5s; 
 
} 
 

 
@-webkit-keyframes fade { 
 
    from { opacity: 0.4 } 
 
    to { opacity: 1 } 
 
} 
 
@keyframes fade { 
 
    from { opacity: 0.4 } 
 
    to { opacity: 1 } 
 
}

<div class="slideshow-container"> 
 
    <div class="slideshow-slides"></div> 
 
    <a class="prev" onClick="plusSlides(-1)">&#10094;</a> 
 
    <a class="next" onClick="plusSlides(1)">&#10095;</a> 
 
</div> 
 
<br /> 
 
<div class="dots" style="text-align:center"></div> 
 
<button class="switch" onClick="loadNextSlideshow()">Switch Slideshow</button>

Answer 2

ここにプランカーが作成されました。下記リンクをご参照ください。

https://plnkr.co/edit/xso6MfwOxQJ4PlDpW90y?p=preview

HTML 
<div class="slideshow-container"> 
<a class="prev" onclick="plusSlides(-1)">&#10094;</a> 
<a class="next" onclick="plusSlides(1)">&#10095;</a> 
</div> 
<br> 

<div style="text-align:center"> 
<span class="dot" onclick="currentSlide(1)"></span> 
<span class="dot" onclick="currentSlide(2)"></span> 
<span class="dot" onclick="currentSlide(3)"></span> 
</div> 
<button>Switch Slideshow</button> 

JavaScript: 


var slideShowIndex = 1; 
var slideShows= [ 
    [ 
     { 

      'image': 'img1.jpg', 
      'caption': 'Caption Text' 
     }, 
     { 
      'image': 'img1.jpg', 
      'caption': 'Caption Text' 
     }, 
     { 
      'image': 'img1.jpg', 
      'caption': 'Caption Text' 
     } 
    ], 
    [ 
     { 

      'image': 'img1.jpg', 
      'caption': 'Caption Text' 
     }, 
     { 
      'image': 'img1.jpg', 
      'caption': 'Caption Text' 
     }, 
     { 
      'image': 'img1.jpg', 
      'caption': 'Caption Text' 
     }, 
     { 
      'image': 'img1.jpg', 
      'caption': 'Caption Text' 
     }, 
     { 
      'image': 'img1.jpg', 
      'caption': 'Caption Text' 
     } 
    ] 
    ] 

buildSlideShow(); 

var slideIndex = 1; 
showSlides(slideIndex); 

function plusSlides(n) { 
    showSlides(slideIndex += n); 
} 

function currentSlide(n) { 
    showSlides(slideIndex = n); 
} 


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


function buildSlideShow(){ 
    var slideText = ''; 
    var slides = document.getElementsByClassName("slideshow-container"); 
    var slidesToRender = slideShows[slideShowIndex-1]; 
    slidesToRender.forEach(function(value,index){ 
    slideText += '<div class="mySlides fade"><div class="numbertext">'+ index+1+ '/'+slidesToRender.length + '</div><img src="'+value.image+'" style="width:100%"><div class="text">'+value.caption+'</div></div>'; 
    }); 
    slides[0].innerHtml = slideText; 

} 

これはあなたのために働く願っています。