简单的图像滑块不起作用（jQuery）

Question

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

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

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

不确定是 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

在你的代码 sn-p... 你有错误：

无法读取未定义的属性“样式”

该错误表明 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添加一个可以评估条件的case：

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>