HTML - 通过我的自动播放幻灯片识别问题

Question

我需要帮助才能修复自动播放幻灯片。它不是显示幻灯片，而是垂直显示图像。箭头按钮或点都不起作用。

HTML

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

  </div>

  <div class="mySlides fade">
    <div class="numbertext">2 / 4</div>
    <img src="slideshow/img2.jpg" style="width:100%">

  </div>

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

  </div>

  <div class="mySlides fade">
    <div class="numbertext">4 / 4</div>
    <img src="slideshow/img4.jpg" style="width:100%">

  </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>
  <span class="dot" onclick="currentSlide(4)"></span>

</div>
</div> <!--end of "slideshow" -->

JS

$("#slideshow > div:gt(0)").hide();

setInterval(function() {
  $('#slideshow > div:first')
    .fadeOut(1000)
    .next()
    .fadeIn(1000)
    .end()
    .appendTo('#slideshow');
}, 3000);

这是结果（缩小以便您可以获得概述）：