Javascript 简单图像 slider
[英]Javascript simple image slider
问题描述
I would like to have a simple picture slider. That slider should be in the header of the website and should switch between a small delay.
我想有一个简单的图片slider。那个slider应该在网址的header之间切换，应该有一个小延迟。 I want it simple and named the pictures 1.jpg, 2.jpg and so on and they are in the folder "bilder".我希望它简单并将图片命名为 1.jpg、2.jpg 等，它们位于文件夹“bilder”中。
I have tried a bit and here is my result:我试了一下，这是我的结果：
<!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>
I guess, that I did something wrong, because my browser is showing only one picture and is not switching.我想，我做错了什么，因为我的浏览器只显示一张图片并且没有切换。
3 个解决方案
解决方案1
1 已采纳 2015-02-19 19:07:08
On every loop you're iterating ( for loop) over all your images, resulting in the latest one. 在每个循环中，您都要遍历所有图像（ for循环），从而生成最新的图像。 Also use only switch_picture (instead of switch_picture() ). 也只能使用switch_picture （而不是switch_picture() ）。
PS: create an 0.jpg image for this counter: 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";
}
解决方案2
0 2015-02-19 20:40:53
I found something here: Stackoverflow Link 我在这里找到了一些东西： 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>
解决方案3
0 2022-04-06 09:00:28
// 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.