Zrobiłem suwak, który zmienia obrazy co 1 sekundę, ale nie wiem, jak zrobić pętlę instrukcji if, obrazy pozostają na pierwszym slajdzie, z którym próbowałem zapętlić while i for, ale nie mogę tego zrobić. Możesz mi pomóc :)
const images = [
"https://www.travelercar.com/wp-content/uploads/2016/04/4a36e314016aa914f203ea6b7d579dc6_large.jpeg",
"https://lemag.nikonclub.fr/wp-content/uploads/2017/07/08.jpg",
"https://www.yourvalleynews.co.uk/wp-content/uploads/2018/03/pic-outside-1080x675.jpg",
];
var counter = 0;
setInterval (function() {
if (counter >= 2 ){
document.getElementById("currentImage").src = images[counter-2];
}
else if (images[0]){
document.getElementById("currentImage").src = images[++counter];
};
}, 1000);
<head>
<meta charset="utf-8">
<title>Intitulé de ma page</title>
<link href="https://fonts.googleapis.com/css?family=Open+Sans+Condensed:300|Sonsie+One" rel="stylesheet" type="text/css">
<link rel="stylesheet" href="style.css">
<style>
</style>
</head>
<body>
<div style="width: 60%; margin: auto;">
<div id="exemple1" name="slide" style="display: flex;">
<!-- image container -->
<img src="https://www.travelercar.com/wp-content/uploads/2016/04/4a36e314016aa914f203ea6b7d579dc6_large.jpeg" id="currentImage" height="300" />
</div>
</div>
<script src="script.js"></script>
</body>
0
Gobi
19 listopad 2019, 18:04
3 odpowiedzi
Kiedy warunek counter>=2, nie zmieniasz zmiennej counter.
const images = [
"https://www.travelercar.com/wp-content/uploads/2016/04/4a36e314016aa914f203ea6b7d579dc6_large.jpeg",
"https://lemag.nikonclub.fr/wp-content/uploads/2017/07/08.jpg",
"https://www.yourvalleynews.co.uk/wp-content/uploads/2018/03/pic-outside-1080x675.jpg",
];
var counter = 0;
setInterval (function() {
if (counter >= 2 ){
counter -= 1; // modify the counter variable
document.getElementById("currentImage").src = images[counter];
}
else if (images[0]){
document.getElementById("currentImage").src = images[++counter];
};
}, 1000);<head>
<meta charset="utf-8">
<title>Intitulé de ma page</title>
<link href="https://fonts.googleapis.com/css?family=Open+Sans+Condensed:300|Sonsie+One" rel="stylesheet" type="text/css">
<link rel="stylesheet" href="style.css">
<style>
</style>
</head>
<body>
<div style="width: 60%; margin: auto;">
<div id="exemple1" name="slide" style="display: flex;">
<!-- image container -->
<img src="https://www.travelercar.com/wp-content/uploads/2016/04/4a36e314016aa914f203ea6b7d579dc6_large.jpeg" id="currentImage" height="300" />
</div>
</div>
</body>
0
daddygames
19 listopad 2019, 18:14
Stworzyłem ten fragment, abyś mógł mieć tyle obrazów, ile chcesz w tablicy.
const images = [
"https://www.travelercar.com/wp-content/uploads/2016/04/4a36e314016aa914f203ea6b7d579dc6_large.jpeg",
"https://lemag.nikonclub.fr/wp-content/uploads/2017/07/08.jpg",
"https://www.yourvalleynews.co.uk/wp-content/uploads/2018/03/pic-outside-1080x675.jpg"];
let count = 0;
const displayImage = () => {
document.getElementById("currentImage").src = images[count];
if( count >= (images.length-1)) count = 0;
else count++;
}
setInterval( displayImage, 1000 );<img src="" id="currentImage" />
0
gugateider
19 listopad 2019, 18:18
To jest działający przykład z wykorzystaniem rekurencji.
const images = [
"https://www.travelercar.com/wp-content/uploads/2016/04/4a36e314016aa914f203ea6b7d579dc6_large.jpeg",
"https://lemag.nikonclub.fr/wp-content/uploads/2017/07/08.jpg",
"https://www.yourvalleynews.co.uk/wp-content/uploads/2018/03/pic-outside-1080x675.jpg",
];
var sliderElement = document.getElementById("currentImage");
(function slider(counter, len){
sliderElement.src = images[counter];
counter ++;
if(len === counter){
counter = 0;
}
setTimeout(slider, 1000, counter, len);
})(0, images.length);<head>
<meta charset="utf-8">
<title>Intitulé de ma page</title>
<link href="https://fonts.googleapis.com/css?family=Open+Sans+Condensed:300|Sonsie+One" rel="stylesheet" type="text/css">
<link rel="stylesheet" href="style.css">
<style>
</style>
</head>
<body>
<div style="width: 60%; margin: auto;">
<div id="exemple1" name="slide" style="display: flex;">
<!-- image container -->
<img src="https://www.travelercar.com/wp-content/uploads/2016/04/4a36e314016aa914f203ea6b7d579dc6_large.jpeg" id="currentImage" height="300" />
</div>
</div>
</body>
0
harry
19 listopad 2019, 18:25
Dziękuję bardzo za Twoją pomoc. Utknąłem na tym godzinami!
– Gobi
19 listopad 2019, 18:23
Chętnie pomoże :)
– harry
19 listopad 2019, 18:24
counter, której nie pokazujesz tutaj?