问题:想要创建一个简单的 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 更改图像(如当前图像)。但问题是,在每个间隔之后,所有图像都会显示出来。
感谢任何帮助!
最佳答案
如果有 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>
关于javascript - 自动 ImageSlider 无法与 SetInterval() 一起使用 - JavaScript/JQuery,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/52679113/