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>

如果有人能解释如何做到这一点而不仅仅是代码，那将是很棒的。）

Javascript幻灯片自动+手动

0 个答案: