简单的图像滑块无法正常工作（jQuery）

Question

我正在使用jQuery创建一个简单的滑块。

问题：滑块正在消失和/或折叠（您可以在刷新之前看到它消失）。

我正在尝试做的事情：创建图像absolute的位置，然后使用JavaScript在脚本中使用nth属性显示display索引。

不确定是隐藏的css还是JavaScript。我有什么想法吗？

$(document).ready(function() {
  $('#sidebar-btn').click(function() {
    $('#sidebar-nav').toggleClass('visible');
  });
});

var index = 0;

function plusIndex(n) {
  index = index + 1;
  showImage(index);
}

/* SLIDER */
showImage(1);

/* Slider function */
function showImage(n) {

  var i;
  var x = document.getElementsByClassName("slider-img");

  // for next slide - forward.
  if(n > x.length) { index = 1 };
  // for prev slide - backwards
  if(n < 1 ) { index = x.length /* last one */ };
  for(i=0; i<x.length; i++) 
  {
    x[i].style.display = "none";
  }
  x[index-1].style.display = "block";  
}

.updates-box {
  background-color: #f5f5f5;
  text-align: center;
  padding: 2rem;
}
.updates-item-headline {
  font-weight: bold;
}
.updates-item {
  padding: 1rem;
  margin: 1rem auto;
}

.slider {
  position: relative;

}
.slider-img {
  position: absolute;

}
.slider .slider-btn {
  position: absolute;	
  color: black;
  width: 50px;
  border:none;
  border-radius: 25px;
  top: 190px; 
  font-size: 35px;
  margin:  1rem;
}
.slider #slide-btn2 {
  position: relative;
  float: right;
}
.slider #slide-btn1:hover {
  box-shadow: 10px 0px 20px  0px black;
}
.slider #slide-btn2:hover {
  box-shadow: 10px 0px 20px  0px black;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="hero-box">
  <div id="slide-wrapper">
    <div class="slider">
      <div class="slide">
        <picture>
           <source media="(max-width: 620px)" srcset="img/hero-slider-mobile.jpg">
            <source media="(min-width: 621)" srcset="img/hero-slider-tablet.jpg">
           <img class="slider-img" src="img/hero-slider-home.jpg" alt="Flowers">
        </picture>						
      </div>
      <div class="slide">
        <picture>
           <source media="(max-width: 620px)" srcset="img/slide-2-mobile.jpg">
            <source media="(min-width: 621)" srcset="img/slide-2-tablet.jpg">
           <img class="slider-img" src="img/slide-2-home.jpg" alt="Flowers">
        </picture>						
      </div>
      <button class="slider-btn" id="slide-btn1">&#10094;</button>
      <button class="slider-btn" id="slide-btn2">&#10095;</button>
    </div>
  </div>
</div>
<div class="updates-box">
  <div class="updates-item-headline">
    <p> UPCOMING EVENT DATES</p>
  </div>
  <div class="updates-item">
    <img class="update-icon" src="img/dates-icon.png">
    <p><b>Thursday 3 August</b></p>
    <p> Open Seminar Enrollment</p>
  </div>
  <div class="updates-item">
    <img class="update-icon" src="img/dates-icon.png">
    <p><b>Thursday 3 August</b></p>
    <p> Open Seminar Enrollment</p>
  </div>
    <div class="updates-item-4">
    <img class="update-icon" src="img/dates-icon.png">
    <p><b>Thursday 3 August</b></p>
    <p> Open Seminar Enrollment</p>
  </div>		
</div>

Answer 1

在您的代码段中...您有错误：

  

无法读取未定义的属性'style'

该错误表示x[index-1]未定义 它未定义，因为index是在上述两个if条件之一中定义的......它们都评估为false。

1. 在if(n > x.length)：n = 1且x.length = 2
2. 在if(n < 1 )：n = 1

所以index是“未定义的”。

接着是for循环，将所有图片设置为display:none 这就是为什么你可以在刷新时看到它们几毫秒。

最后，x[index-1]也未定义。因此，没有图片被设置回display:block。

我建议您添加一个案例，可以将条件评估为true：

if(n >= 1 && n<=x.length ){ index = n; };

console.clear();
$(document).ready(function() {
  $('#sidebar-btn').click(function() {
    $('#sidebar-nav').toggleClass('visible');
  });
});

var index = 0;

function plusIndex(n) {
  index = index + 1;
  showImage(index);
}

/* SLIDER */
showImage(1);

/* Slider function */
function showImage(n) {

  var i;
  var x = document.getElementsByClassName("slider-img");

  // for next slide - forward.
  if(n > x.length) { index = 1 };
  // for prev slide - backwards
  if(n < 1 ) { index = x.length /* last one */ };
  if(n >= 1 && n<=x.length ){ index = n; };         // ADD THIS CASE
  for(i=0; i<x.length; i++) 
  {
    x[i].style.display = "none";
  }
  x[index-1].style.display = "block";  
}

.updates-box {
  background-color: #f5f5f5;
  text-align: center;
  padding: 2rem;
}
.updates-item-headline {
  font-weight: bold;
}
.updates-item {
  padding: 1rem;
  margin: 1rem auto;
}

.slider {
  position: relative;

}
.slider-img {
  position: absolute;

}
.slider .slider-btn {
  position: absolute;	
  color: black;
  width: 50px;
  border:none;
  border-radius: 25px;
  top: 190px; 
  font-size: 35px;
  margin:  1rem;
}
.slider #slide-btn2 {
  position: relative;
  float: right;
}
.slider #slide-btn1:hover {
  box-shadow: 10px 0px 20px  0px black;
}
.slider #slide-btn2:hover {
  box-shadow: 10px 0px 20px  0px black;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="hero-box">
  <div id="slide-wrapper">
    <div class="slider">
      <div class="slide">
        <picture>
           <source media="(max-width: 620px)" srcset="img/hero-slider-mobile.jpg">
            <source media="(min-width: 621)" srcset="img/hero-slider-tablet.jpg">
           <img class="slider-img" src="http://lorempixel.com/400/200/cats" alt="Flowers">
        </picture>						
      </div>
      <div class="slide">
        <picture>
           <source media="(max-width: 620px)" srcset="img/slide-2-mobile.jpg">
            <source media="(min-width: 621)" srcset="img/slide-2-tablet.jpg">
           <img class="slider-img" src="http://lorempixel.com/400/200/nature" alt="Flowers">
        </picture>						
      </div>
      <button class="slider-btn" id="slide-btn1">&#10094;</button>
      <button class="slider-btn" id="slide-btn2">&#10095;</button>
    </div>
  </div>
</div>
<div class="updates-box">
  <div class="updates-item-headline">
    <p> UPCOMING EVENT DATES</p>
  </div>
  <div class="updates-item">
    <img class="update-icon" src="img/dates-icon.png">
    <p><b>Thursday 3 August</b></p>
    <p> Open Seminar Enrollment</p>
  </div>
  <div class="updates-item">
    <img class="update-icon" src="img/dates-icon.png">
    <p><b>Thursday 3 August</b></p>
    <p> Open Seminar Enrollment</p>
  </div>
    <div class="updates-item-4">
    <img class="update-icon" src="img/dates-icon.png">
    <p><b>Thursday 3 August</b></p>
    <p> Open Seminar Enrollment</p>
  </div>		
</div>