javascript - 自动 ImageSlider 无法与 SetInterval() 一起使用 - JavaScript/JQuery

Question

问题:想要创建一个简单的 javascript/jquery 自动图像 slider ，但有些东西似乎不起作用。

// jquery //
$(document).ready(function() {
  $("#imgSlider_img1").show();
  $("#imgSlider_img2").hide();
  $("#imgSlider_img3").hide();
  $("#imgSlider_img4").hide();
})

// slider //

var current_image_number = 1;

function slider() {
  if (current_image_number == 1) {
    $("#imgSlider_img1").hide();
    $("#imgSlider_img2").show('fast');
    $("#imgSlider_img3").hide();
    $("#imgSlider_img4").hide();
    current_image_number = 2;
  }
  if (current_image_number == 2) {
    $("#imgSlider_img1").hide();
    $("#imgSlider_img2").hide();
    $("#imgSlider_img3").show('fast');
    $("#imgSlider_img4").hide();
    current_image_number = 3;
  }
  if (current_image_number == 3) {
    $("#imgSlider_img1").hide();
    $("#imgSlider_img2").hide();
    $("#imgSlider_img3").hide();
    $("#imgSlider_img4").show('fast');
    current_image_number = 4;
  }
  if (current_image_number == 4) {
    $("#imgSlider_img1").show('fast');
    $("#imgSlider_img2").hide();
    $("#imgSlider_img3").hide();
    $("#imgSlider_img4").hide();
    current_image_number = 1;
  }
}
window.setInterval(slider, 4000);

.imgSlider {
  height: 500px;
  margin-left: 10%;
  margin-right: 10%;
  margin-top: 10px;
  box-shadow: 5px 5px 5px #333;
}

.imgSlider img {
  width: 100%;
  height: 100%;
}

<div class="imgSlider">
  <img id="imgSlider_img1" src="images/index/imgSlider_img1.png">
  <img id="imgSlider_img2" src="images/index/imgSlider_img2.jpg">
  <img id="imgSlider_img3" src="images/index/imgSlider_img3.jpg">
  <img id="imgSlider_img4" src="images/index/imgSlider_img4.jpg">
</div>

逻辑:我想使用当前的 html 方案制作一个简单的自动 slider 。我希望能够在“imgSlider”div 内增加或通过 ID 更改图像(如当前图像)。但问题是，在每个间隔之后，所有图像都会显示出来。

感谢任何帮助!

Answer 1

如果有 4 个 if，则所有 if 都会被执行。因此，假设在入口点 index 的值为 1。第一个 if 将为 true，并将index 设置为 2。现在，第二个 if 条件也变为 true 并且会将 index 设置为 3。依此类推，直到将值重置回 1。

因此，您需要使用 if else 来代替 4 个 if

// jquery //
$(document).ready(function(){
    $("#imgSlider_img1").show();
    $("#imgSlider_img2").hide();
    $("#imgSlider_img3").hide();
    $("#imgSlider_img4").hide();
})

// slider //

var current_image_number = 1;
function slider() {
    if (current_image_number == 1) {
        $("#imgSlider_img1").hide();
        $("#imgSlider_img2").show('fast');
        $("#imgSlider_img3").hide();
        $("#imgSlider_img4").hide();
        current_image_number = 2;
    } else if (current_image_number == 2) {
        $("#imgSlider_img1").hide();
        $("#imgSlider_img2").hide();
        $("#imgSlider_img3").show('fast');
        $("#imgSlider_img4").hide();
        current_image_number = 3;
    } else if (current_image_number == 3) {
        $("#imgSlider_img1").hide();
        $("#imgSlider_img2").hide();
        $("#imgSlider_img3").hide();
        $("#imgSlider_img4").show('fast');
           current_image_number = 4;
    } else if (current_image_number == 4) {
        $("#imgSlider_img1").show('fast');
        $("#imgSlider_img2").hide();
        $("#imgSlider_img3").hide();
        $("#imgSlider_img4").hide();
        current_image_number = 1;
    }
}
window.setInterval(slider, 4000);

.imgSlider {
    height: 500px;
    margin-left: 10%;
    margin-right: 10%;
    margin-top: 10px;
    box-shadow: 5px 5px 5px #333;
}

.imgSlider img {
    width: 100%;
    height: 100%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="imgSlider">
    <img id="imgSlider_img1" alt="imgSlider_img1" src="images/index/imgSlider_img1.png">
    <img id="imgSlider_img2" alt="imgSlider_img2" src="images/index/imgSlider_img2.jpg">
    <img id="imgSlider_img3" alt="imgSlider_img3" src="images/index/imgSlider_img3.jpg">
    <img id="imgSlider_img4" alt="imgSlider_img4" src="images/index/imgSlider_img4.jpg">
</div>

您可以进一步简化代码如下

// jquery //
$(document).ready(function(){
    $(".imgSlider > img").hide(); // hide all images
    $("#imgSlider_img1").show(); // show 1st image
});

var current_image_number = 1;
function slider() {
    $(".imgSlider > img").hide(); // hide all images
    current_image_number = ++current_image_number > 4 ? 1 : current_image_number; // calculate the next image
    $("#imgSlider_img" + current_image_number).show('fast'); // show the image
}
window.setInterval(slider, 4000);

.imgSlider {
    height: 500px;
    margin-left: 10%;
    margin-right: 10%;
    margin-top: 10px;
    box-shadow: 5px 5px 5px #333;
}

.imgSlider img {
    width: 100%;
    height: 100%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="imgSlider">
    <img id="imgSlider_img1" alt="imgSlider_img1" src="images/index/imgSlider_img1.png">
    <img id="imgSlider_img2" alt="imgSlider_img2" src="images/index/imgSlider_img2.jpg">
    <img id="imgSlider_img3" alt="imgSlider_img3" src="images/index/imgSlider_img3.jpg">
    <img id="imgSlider_img4" alt="imgSlider_img4" src="images/index/imgSlider_img4.jpg">
</div>