Question

我一直在尝试使用HTML和JavaScript进行幻灯片显示，但是它不起作用，并且没有出现任何错误。我有2个脚本...一个用于将图像放入html，另一个用于使其成为幻灯片。这是显示图片的JavaScript：

var folder = "uploads/";
var img = "<img src='";
var imgStyle = "style='width:100%'";
var imgClass = "class='slide'";
$.ajax({
  url : folder,
  success : function (data) {
    $(data).find("a").attr("href", function (i, val){
      if( val.match(/\.(jpe?g|png|gif)$/) ) {
        $( "#slideshow" ).append( img + folder + val + "'" + imgClass + imgStyle + ">");
      }
    });
  }
});

以上方法工作正常，但幻灯片是问题所在。没有了slideshow.js文件，图像就会显示出来，但是一旦我运行javascript幻灯片，它就会使所有内容都不可见。这是slideshow.js文件中的代码：

var slides = document.querySelectorAll('#slideshow .slide'),
  currentSlide = 0,
  firstBtn = document.getElementById('one'),
  secondBtn = document.getElementById('two'),
  thirdBtn = document.getElementById('three');

function getAllSiblings(elem, filter) {
  var sibs = [];
  elem = elem.parentNode.firstChild;
  do {
    if (elem.nodeType === 3) continue; // text node
    if (!filter || filter(elem)) sibs.push(elem);
  } while (elem = elem.nextSibling)
  return sibs;
}

function nextSlide() {
  slides[currentSlide].className = 'slide';
  currentSlide = (currentSlide + 1) % slides.length;
  slides[currentSlide].className = 'slide active';
};

firstBtn.onclick = function() {
  var slide = getAllSiblings(slides[0]);
  slide.forEach(function(el) {
    el.classList.remove('active');
  });
  slides[0].className = 'slide active';
  var result = getAllSiblings(this);
  result.forEach(function(el) {
    el.classList.remove('active');
  })
  this.classList.add('active');

};
secondBtn.onclick = function() {
  var slide = getAllSiblings(slides[1]);
  slide.forEach(function(el) {
    el.classList.remove('active');
  });
  slides[1].className = 'slide active';
  var result = getAllSiblings(this);
  result.forEach(function(el) {
    el.classList.remove('active');
  })
  this.classList.add('active');

};
thirdBtn.onclick = function() {
  var slide = getAllSiblings(slides[2]);
  slide.forEach(function(el) {
    el.classList.remove('active');
  });
  slides[2].className = 'slide active';
  var result = getAllSiblings(this);
  result.forEach(function(el) {
    el.classList.remove('active');
  })
  this.classList.add('active');
};

<!DOCTYPE html>
<html lang="en" dir="ltr">

<head>
  <meta charset="utf-8">
  <link rel="stylesheet" href="css/index2.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
  <script src="js/display.js"></script>
  <script defer src="js/slideshow.js"></script>
  <title>Test Images</title>
</head>

<body>
  <div id="slideshow">

  </div>
  <div class="controllers">
    <span id='one' class='active'></span>
    <span id='two'></span>
    <span id='three'></span>
  </div>
</body>

</html>

这是显示器的数字笔：https://codepen.io/ksaeidnia0/pen/BaozNzP

以下是幻灯片的电笔：https://codepen.io/ksaeidnia0/pen/ZEbOGWz

Answer 1

我建议使用自举程序中的内置幻灯片显示，单击here了解更多信息。下面是一个代码示例。这样比较简单，您也可以添加字幕。

<div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
  <ol class="carousel-indicators">
    <li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
    <li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
    <li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
  </ol>
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img class="d-block w-100" src="..." alt="First slide">
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" src="..." alt="Second slide">
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" src="..." alt="Third slide">
    </div>
  </div>
  <a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </a>
  <a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
</div>

请记住要通过此代码导入引导程序

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">

或那些您需要JavaScript的人

<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>

您也可以通过Javascript更改图片来源

document.getElementById("myImg").src = "TheImage";

更多信息，请按here - w3school，here - w3school和here - stackoverflow question

幻灯片不起作用，但也没有显示错误

1 个答案: