Question

我的幻灯片由8张图像组成，但仅显示1张。我发现这与slides.length有关，但我只是不知道如何精确地更改它。我的js代码如下。

window.addEventListener('DOMContentLoaded',init,false);

function init(){
'use strict';

var slideIndex = 1;
showSlides(slideIndex);


function showSlides(n) {
  var i;
  var slides = document.getElementsByClassName("mySlides");
  var dots = document.getElementsByClassName("dot");
	console.log(slides.length);
  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", "");
  }
	
	console.log(slides,slides.length,slideIndex-1,slides[0]);
  
	slides[slideIndex-1].style.display = "block"; 
  dots[slideIndex-1].className += " active";
}

}

Answer 1

我注意到的一些问题：

您只能运行一次此代码，因此幻灯片不会被更新。
您绝不会增加或减少slideIndex

您可以做什么：

运行计时器以每隔几秒钟更新一次，或者单击按钮即可
每次增加slideIndex即可更改幻灯片。

如果您仍然遇到问题，请给我们提供更多信息。祝你好运

Answer 2

一直在努力寻求解决方案，很抱歉花了一段时间，但我想出了一些增加/减少幻灯片的方法？但是，我无法调整图像的大小（它们在幻灯片中显得太大）！我也无法显示第一张图片！图像出现在onclick上。这是新的js代码。

window.addEventListener('DOMContentLoaded',init,false);


function init(){
'use strict';

var slideIndex = 0; //first img
	
var prev=document.querySelector('[class="prev"]'); //get arrow
var next=document.getElementsByClassName('next')[0]; //get arrow

/*invoke function with clicl on arrow*/
next.addEventListener('click',
											function(){showSlides(slideIndex)});



function showSlides() {
	//console.log(slideIndex);
  var i;
  var slides = document.getElementsByClassName("mySlides");
  var dots = document.getElementsByClassName("dot");
	//console.log(slides.length);
  if (slideIndex > slides.length) {slideIndex = 1} //wenn ende erreicht, dann von vorn
 
  else slideIndex++;
	//console.log(slideIndex);
  
	slides[slideIndex-1].style.display = "none";
	slides[slideIndex].style.display="block";
  
	
	dots[slideIndex].className += " active";
}

}

Answer 3

window.onload = function () {

var slideShow = function () {
    var i;
    var slides = document.querySelectorAll(".slides");
    for (i = 0; i < slides.length; i++) {
      slides[i].setAttribute("style","display:none");
    }
    count++;
    if (count > slides.length) { count = 1; }
    slides[count-1].setAttribute("style","display:block");
    setTimeout(slideShow, 3600);
}

var count = 0;
slideShow();
}

Answer 4

window.onload = function () {
    /* ...then execute the content of the referenced FN */
    'use strict';

    function showData() {
        var info = document.getElementById('info');
        var selctedImg = this;
        var html = '<b>Alle Informationen des Bildes:</b>';
        html += '<ul>';
        html += '<li><b>src-Attribut:</b><br>' + selctedImg.src + '</li>';
        html += '<li><b>alt-Attribut:</b><br>' + selctedImg.alt + '</li>';
        html += '<li><b>title-Attribut:</b><br>' + selctedImg.title + '</li>';
        html += '<li><b>id-Attribut:</b><br>' + selctedImg.id + '</li>';
        html += '</ul>';

        info.innerHTML = html;
    }


    var img = document.getElementById('images').getElementsByTagName('img');
    console.log(img);

    /* Bind the event handlers.
    After this code block an information [ev] or [event] can be seen at the img element in the input sector of the browser */
    for (var index = 0; index < img.length; index++) {
        img[index].onmouseover = showData;
    }

Js slides.length。如何在幻灯片中显示所有图像

4 个答案: