[英]Javascript simple image slider
我想有一个简单的图片slider。那个slider应该在网址的header之间切换,应该有一个小延迟。 我希望它简单并将图片命名为 1.jpg、2.jpg 等,它们位于文件夹“bilder”中。
我试了一下,这是我的结果:
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<script type="text/javascript">
function picture_slider(){
setInterval( switch_picture(), 3000 );
return false;
}
function switch_picture() {
for ( var i = 1; i < 7 ; i++ ) {
var pfad = "bilder/" + i + ".jpg";
document.getElementById("bild").src = pfad;
i++;
};
return false;
}
</script>
</head>
<body onload="picture_slider();">
<img id="bild" src="" />
</body>
</html>
我想,我做错了什么,因为我的浏览器只显示一张图片并且没有切换。
在每个循环中,您都要遍历所有图像( for
循环),从而生成最新的图像。 也只能使用switch_picture
(而不是switch_picture()
)。
PS:为此计数器创建一个0.jpg
图像:
function picture_slider(){
setInterval( switch_picture, 2000 ); // corrected removing "()"
}
var bild = document.getElementById("bild")
var i = 0; // Start from image 0.jpg
function switch_picture() { // don't iterate a loop in here!
bild.src = "bilder/"+ (i++ % 7) +".jpg";
}
我在这里找到了一些东西: Stackoverflow链接
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<script type="text/javascript">
var i = 0;
var images = [ "1", "2", "3", "4", "5", "6", "7"]
function picture_slider(){
setInterval( switch_picture, 2000 );
}
function switch_picture() {
i++;
if ( i >= images.length ) {
i = 0;
};
var bild = document.getElementById("bild");
bild.src = "bilder/" + images[i] + ".jpg";
}
</script>
</head>
<body onload="picture_slider();">
<img id="bild" src="" />
</body>
</html>
// 1. images need to store in an Array const images = [ "img/pic-1.jpg", "img/pic-2.jpg", "img/pic-3.jpg", "img/pic-4.jpg", "img/pic-5.jpg", "img/pic-6.jpg", "img/pic-7.jpg" ]; // 7. getElementById by calling, store globally (do not call inside loop/setInterval performance will loose) const imgElement= document.getElementById("slider-image"); // 2. set initial value for array index let imgIndex = 0; // 3. create setInterval() const sliderInterval = setInterval(() => { // 6. check condition if length is finished then start again from 0 if (imgIndex >= images.length) { // use >= because index start from 0 and length start from 1, if use just > then last element will be undefined imgIndex = 0; } // 5. testing // console.log(imgIndex); // 9. Dynamically change image src const imgUrl = images[imgIndex]; imgElement.setAttribute('src', imgUrl); // 4. increase value by 1 imgIndex++; }, 1000);
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.