幻灯片的第一个元素不显示，按钮也不起作用

Question

所以我试图在同一页面上创建多个幻灯片，我现在设法获得了这个代码：

HTML

<div class="portfolio-slideshow">
    <a class="prev" onclick="slide(0,-1)">❮</a>
    <div class="slide"> <img src="img/dailyui/008.png" class="slideimg_0" id="0"> </div>
    <div class="slide"> <img src="img/dailyui/007.jpg" class="slideimg_0" id="1"> </div>
    <div class="slide"> <img src="img/dailyui/006.jpg" class="slideimg_0" id="2"> </div>
    <div class="slide"> <img src="img/dailyui/003.jpg" class="slideimg_0" id="3"> </div>
    <a class="next" onclick="slide(0,1)">❯</a>
</div>

<div class="portfolio-slideshow">
    <a class="prev" onclick="slide(1,-1)">❮</a>
    <div class="slide"> <img src="img/dailyui/008.png" class="slideimg_1" id="0"> </div>
    <div class="slide"> <img src="img/dailyui/007.jpg" class="slideimg_1" id="1"> </div>
    <div class="slide"> <img src="img/dailyui/006.jpg" class="slideimg_1" id="2"> </div>
    <div class="slide"> <img src="img/dailyui/003.jpg" class="slideimg_1" id="3"> </div>
    <a class="next" onclick="slide(1,1)">❯</a>
</div>

还有我的body:

<body onLoad="showSlides()">

SCSS

.portfolio-slideshow{
    width: 30%;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.slide{
    display: none;
    padding:0 35px;

    img{
        max-height:40vh;
        max-width:100%;
        border-radius:5px;
        -webkit-filter: drop-shadow(5px 5px 5px #000);
        filter: drop-shadow(0px 2px 5px #222);
        cursor: zoom-in;
        display: none;
    }
}

.prev,.next{
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-weight: bold;
  font-size: 18px;
  transition: 0.2s ease;
  opacity: 0.25;

  &:hover{ opacity: 1; }
}

Javascript

var slideIndex = [0,0]
function showSlides(){
    var aux = slideIndex.length;
    var i;
    for(i=0; i<aux; i++){
        slide(i,0);
    }
}
function slide(n,m){
    var i;
    var aux = document.getElementsByClassName("slideimg_" + n);
    var aux2 = aux.length - 1;
    slideIndex[n] += m;
    if (slideIndex[n] < 0) slideIndex = aux2;
    else if (slideIndex[n] > aux2) slideIndex = 0;
    for(i=0; i<aux.length; i++){ aux[i].style.display = "none"; }
    aux[slideIndex[n]].style.display = "block";
}

另一件要提到的事情是，当我点击 next/previous 按钮时，我得到了这个：

Uncaught TypeError: Cannot read property 'style' of undefined at slide (websitejs2.js:17) at HTMLAnchorElement.onclick (index2.html:87)

所以，你们中的任何人都可以帮助我完成任务吗？

Answer 1

浏览代码中的注释。如有疑问，请添加评论

var slideIndex = [0, 0]

function showSlides() {
  var aux = slideIndex.length;
  var i;
  for (i = 0; i < aux; i++) {
    slide(i, 0);
  }
}

function slide(n, m) {
  var i;
  var aux = document.getElementsByClassName("slideimg_" + n);
  var aux2 = aux.length - 1;
  /*added logic */
  if (slideIndex[n] == 3 && m == 1) {
    slideIndex[n] = -1
  }
  if (slideIndex[n] == 0 && m == -1) {
    slideIndex[n] = 4
  }
  /*added logic end*/
  slideIndex[n] += m;

  if (slideIndex[n] < 0) slideIndex = aux2;
  else if (slideIndex[n] > aux2) slideIndex = 0;
  for (i = 0; i < aux.length; i++) {
    aux[i].style.display = "none";
  }
  aux[slideIndex[n]].style.display = "block";
}

.portfolio-slideshow {
  width: 30%;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.slide {
  display: block;
  /*changed to block*/
  padding: 0 35px;
  img {
    max-height: 40vh;
    max-width: 100%;
    border-radius: 5px;
    -webkit-filter: drop-shadow(5px 5px 5px #000);
    filter: drop-shadow(0px 2px 5px #222);
    cursor: zoom-in;
    display: none;
  }
}

.prev,
.next {
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: black;
  /*changed to black*/
  font-weight: bold;
  font-size: 18px;
  transition: 0.2s ease;
  opacity: 1;
  /*changed to 1*/
  &:hover {
    opacity: 1;
  }
}


/*added*/

img {
  height: 100px;
  width: 100px;
  display: none;
}

<body onLoad="showSlides()">
  <div class="portfolio-slideshow">
    <a class="prev" onclick="slide(0,-1)">❮</a>
    <div class="slide"> <img src="https://static.pexels.com/photos/158507/marigold-calendula-orange-blossom-158507.jpeg" class="slideimg_0" id="0"> </div>
    <div class="slide"> <img src="https://static.pexels.com/photos/59836/snowflake-flower-blossom-bloom-59836.jpeg" class="slideimg_0" id="1"> </div>
    <div class="slide"> <img src="https://static.pexels.com/photos/93013/pexels-photo-93013.jpeg" class="slideimg_0" id="2"> </div>
    <div class="slide"> <img src="https://static.pexels.com/photos/101538/dandelion-seeds-nature-spring-101538.jpeg" class="slideimg_0" id="3"> </div>
    <a class="next" onclick="slide(0,1)">❯</a>
  </div>

  <div class="portfolio-slideshow">
    <a class="prev" onclick="slide(1,-1)">❮</a>
    <div class="slide"> <img src="https://static.pexels.com/photos/158507/marigold-calendula-orange-blossom-158507.jpeg" class="slideimg_1" id="0"> </div>
    <div class="slide"> <img src="https://static.pexels.com/photos/59836/snowflake-flower-blossom-bloom-59836.jpeg" class="slideimg_1" id="1"> </div>
    <div class="slide"> <img src="https://static.pexels.com/photos/93013/pexels-photo-93013.jpeg" class="slideimg_1" id="2"> </div>
    <div class="slide"> <img src="https://static.pexels.com/photos/101538/dandelion-seeds-nature-spring-101538.jpeg" class="slideimg_1" id="3"> </div>
    <a class="next" onclick="slide(1,1)">❯</a>
  </div>
</body>

幻灯片的第一个元素不显示，按钮也不起作用

First element of a slideshow doesn't show, and also the buttons doesn't work

html

javascript

css

slideshow