Javascriptのスライドショー自動+手動

Question

javascriptのスライドショーを自動的に+クリックで変更したいと考えています。ここ コードは、これまで（写真のonClickを変更する）である

slideIndex = 1; 
showSlides(slideIndex); 

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

function showSlides(n) { 

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

    slides[slideIndex-1].style.display = "block"; 

} 

助けてください！ここで

は、誰かが単にコードを与えていないことを行う方法を説明できる場合、それは素晴らしいことだHTML

<div class = "slideshow_container"> 
       <div class="mySlides fade"> 
        <img src="main_slide/dzive.jpg"> 
        <div class = "slide_text_modules"> 
         <div class="text1">Kristaps Slakters - Zvejsalnieks</div> 
         <div class="text2">Dzīve kļūst skaistāka,<br> kad satiec savu īsto frizieri</div> 
        </div> 
       </div> 
       <div class="mySlides fade"> 
        <img src="main_slide/keepcalm.jpg"> 
        <div class = "slide_text_modules"> 
         <div class="text1">Kristaps Slakters - Zvejsalnieks</div> 
         <div class="text2">Keep calm <br>and change your hair!</div> 
        </div> 
       </div> 
       <div class="mySlides fade"> 
        <img src="main_slide/koelju.jpg"> 
        <div class = "slide_text_modules"> 
         <div class="text1">Paulu Koelju</div> 
         <div class="text2 text_small">Katrai dienai savs brīnums. Tāpēc pieņem <br> 
         svētību, strādā un radi savus mazos mākslas<br> 
         darbus jau šodien! Rīt tev taps dāvāts vēl.</div> 
        </div> 
       </div> 
       <div class="mySlides fade"> 
        <img src="main_slide/lopedevega.jpg"> 
        <div class = "slide_text_modules"> 
         <div class="text1">Lope de Vega</div> 
         <div class="text2">Spēks uzvar spēku,<br> skaistums uzvar visu.</div> 
        </div> 
       </div> 
       <div class="mySlides fade"> 
        <img src="main_slide/slakters.jpg"> 
        <div class = "slide_text_modules"> 
         <div class="text1">Gotholds Efraims Lesings</div> 
         <div class="text2 text_small">Jo skaistāka ir sieviete, jo godīgākai tai ir jābūt,<br> 
         jo tikai viņas godīgums spēj novērst to ļaunumu,<br> 
         ko spēj radīt viņas skaistums.</div> 
        </div> 
       </div> 
        <div class = "arrows arrow_right" onclick="plusSlides(1)">&#10093; </div> 
        <div class = "arrows arrow_left" onclick="plusSlides(-1)">&#10092; </div> 
      </div> 

です:)

Answer 1

ダイナミックCSSのトランジション効果と一時停止/再開機能を持つJavaScriptのスライドショージェネレータ。

jQueryを使用しない場合は、プレーンなjavascriptとes2015の機能があります。

HTML

<div class="foreground-img"></div> 
<div class="background-img"></div> 

<button class="start">Start</button> 
<button class="pause">Pause</button> 

CSS

div { 
    width: 100px; 
    height: 100px; 
    position: absolute; 
    top: 40px; 
    transition: opacity 1s ease-in-out; 
} 

.Hide { 
    opacity: 0 !important; 
} 

JS

const $foreground = document.querySelector('.foreground-img'); 
const $background = document.querySelector('.background-img'); 
const $start = document.querySelector('.start'); 
const $pause = document.querySelector('.pause'); 

const images = [ 
    'https://dummyimage.com/100x100/e62020/fff&text=IMG1', 
    'https://dummyimage.com/100x100/20e679/fff&text=IMG2', 
    'https://dummyimage.com/100x100/4120e6/fff&text=IMG3' 
]; 

// initialize a new slideshow 
const slideshow = new Slideshow($foreground, $background, images); 

// start slideshow on load 
// can be use with or without the callback 
// `imgIndex` refer to variable `i` in `Slideshow` 
slideshow.start((imgIndex) => { 
    console.log('The current image is:', images[imgIndex]); 
}); 

$pause.addEventListener('click',() => { 
    slideshow.pause(); 
}); 
$start.addEventListener('click',() => { 
    slideshow.start(); 
}); 

/* ================ 
slideshow generator 
=================== */ 

function Slideshow($foreground, $background, images) { 
    // slideshow duration in milliseconds 
    const duration = 2000; 

    const length = images.length - 1; 

    // setInterval id used to stop the slideshow if needed 
    let id; 

    // used to iterate through images 
    let i = 0; 

    // initialize slideshow 
    // show foreground 
    $foreground.style.backgroundImage = `url("${images[0]}")`; 
    // hide background 
    $background.classList.add('Hide'); 

    // start/resume slideshow 
    this.start = (callback) => { 
    id = setInterval(() => { 
     // everytime function is called `i` increase by 1 
     // when reach last img `i` is set to 0 
     // first call start at second img: `i == 1` 
     i = (i === length) ? 0 : i + 1; 
     // set image url 
     // show/hide image 
     changeImage($foreground); 
     changeImage($background); 
     // return the current image index in a callback 
     if (typeof callback === 'function') { 
     callback(i); 
     } 
    }, duration); 
    } 

    // pause slideshow 
    this.pause =() => clearInterval(id); 

    function changeImage($img) { 
    if ($img.classList.contains('Hide')) { 
     $img.style.backgroundImage = `url("${images[i]}")`; 
     $img.classList.remove('Hide'); 
    } else { 
     $img.classList.add('Hide'); 
    } 
    } 
} 

https://jsfiddle.net/qqpobuoy/6/