Javascript simple image slider
Question
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. I want it simple and named the pictures 1.jpg, 2.jpg and so on and they are in the folder "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 answers
solution1
1 ACCPTED 2015-02-19 19:07:08
On every loop you're iterating ( for loop) over all your images, resulting in the latest one. Also use only switch_picture (instead of switch_picture() ).
PS: create an 0.jpg image for this counter:
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";
}
solution2
0 2015-02-19 20:40:53
I found something here: Stackoverflow Link
<!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>
solution3
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);
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.