How can I reset interval onclick in JavaScript. I have the following tutorial and everything works bt I can get the sideshow to re-start on click.
var myImage = document.getElementById("mainImage");
var imageArray = ["_images/overlook.jpg","_images/winery_sign.jpg","_images/lunch.jpg",
_images/bigSur.jpg","_images/flag_photo.jpg","_images/mission_look.jpg"];
var imageIndex = 0;
function changeImage (){
myImage.setAttribute("src",imageArray [imageIndex]);
imageIndex++;
if (imageIndex >= imageArray.length){
imageIndex = 0;
}
}
var intervalHandler = setInterval(changeImage, 5000);
myImage.onclick = function (){
clearInterval(intervalHandler);
}
**// The code below doesn’t work**
var intervalReset = clearInterval;
myImage.onclick = function (){
setInterval(intervalReset);
};
The setInterval returns an interval ID which you use to clear the interval:
var intervalDuration = 5000;
myImage.onclick = function (){
clearInterval(intervalHandler);
// Assumes intervalDuration is defined
intervalHandler = setInterval(changeImage, intervalDuration);
};
You're setting onclick twice, that replaces the handler, so only the later definition will count. Use addEventListener instead:
myImage.addEventListener("click", function() {
//first set of stuff
});
myImage.addEventListener("click", function() {
//more stuff
});
And only your first function makes sense. You might want to also reset imageIndex to 0.
So all-in-all, your code should look something like:
var intervalHandler = setInterval(changeImage, 5000);
myImage.addEventListener("click", function() {
clearInterval(intervalHandler);
imageIndex = 0;
intervalHandler = setInterval(changeImage, 5000); //restart again
});
Related
I try to make 3 basic slideshow.
I made this code for the first one and wanted to use it on the other 2 as well with the New slideS() method and with some parameter changing.But it's not working,even the first function is'nt working if I put parameter in it.
Can somebody explain me why is this not working and how to fix it?Thanks beforehand!
var img = document.getElementById("asd");
var imgArr = ["1.jpg", "3.png", "3.png"];
var i = 0;
function slideS(a) {
a.src = imgArr[i];
if (i < imgArr.length - 1) {
i++;
} else {
i = 0;
}
setTimeout("slideS()", 1500);
}
slideS(img)
You could do something like this, using an object oriented approach:
function SlideShow(el, imagesArray, msDelay) {
this.el = el;
this.images = imagesArray;
this.delay = (msDelay) ? msDelay : 1000;
this.timer = null;
this.Run = function () {
var self = this;
var index = 0;
this.timer = setInterval(function(){
self.el.src = self.images[index++ % self.images.length];
}, this.delay);
}
this.Stop = function() {
this.timer = null;
}
}
var img = document.getElementById("asd");
var imgArr = ["1.jpg", "3.png", "3.png"];
var delay = 1500;
var ss = new SlideShow(img, imgArr, delay);
ss.Run();
...
ss.Stop();
Would that work for you? Then you are using pure functions and an object that can be used to start, stop, and manage any slide show.
I think you want like:
Remove setTimeout. And use setInterval:
setInterval(function(){
slideS(img)
},1500)
You could use a closure over the element and the array and use setInterval instead of setTimeout.
function slide(id, array) {
function swap() {
image.src = array[i];
i++;
i %= array.length;
}
var image = document.getElementById(id),
i = 0;
setInterval(swap, 1500);
}
slide('image1', ['http://lorempixel.com/400/200/', 'http://lorempixel.com/400/200/', 'http://lorempixel.com/400/200/']);
<image id="image1"></image>
I assume it works when the function doesn't take a parameter?
Then, the reason it would work with no parameter, but stop working with a parameter, is that the setTimeout tries to recursively call the function but doesn't pass a parameter. So you'd change that to
setTimeout(() => {slideS(a);}, 1500);
But then when you try to run multiple instances of this concurrently, you'll get into trouble because your'e using global variables. You'll need to use something more local (perhaps closures?) for your lcv, for example.
try this... you are making mistake at some places
var img = document.getElementById("asd");
var imgArr = ["1.jpg", "3.png", "3.png"];
var i = 0;
function slideS(a) {
a.src = imgArr[i];
if (i < imgArr.length - 1) {
i++;
} else {
i = 0;
}
setTimeout(() => slideS(a), 1500);
/* you need to pass function to setTimeout and pass refrence of image that's 'a' */
// or use function instead of arrow function
setTimeout(function() { slides(a) }, 1500);
}
slideS(img)
hope this helps..
You have to use setInterval instead of setTimeout
var img = document.getElementById("asd");
var imgArr = ["https://i.stack.imgur.com/lgt0W.png", "https://i.stack.imgur.com/X0fKm.png", "https://i.stack.imgur.com/YfPSD.png"];
var i = 0;
function slideS(a) {
a.src = imgArr[i];
if (i < imgArr.length - 1) {
i++;
} else {
i = 0;
}
}
slideS(img); //initial call to start it without having to wait for 1500 ms to pass
setInterval(function() {
slideS(img);
}, 1500);
<img id="asd">
I have a countdown who will display a new piture every 5 secondes >> it approximatively work, but at the end of the array composed by 10 pictures, I am not able to stop countdown + stop to display picture with the clearInterval...
My script
<script>
var myImage = document.getElementById ("mainImage");
var imageArray = ["img/lunge.png",
"img/plank.png",
"img/push-up-and-rotation.png",
"img/push-up.png",
"img/side-plank-left.png",
"img/side-plank-right.png",
"img/squat.png",
"img/step-up-onto-chair.png",
"img/triceps-dip-on-chair.png",
"img/wall-sit.png"]
var imageIndex = 0;
$(document).ready(function () {
$('#submit').click(function () {
$('.timer').circularCountDown()
var inter = setInterval (changeImage, 5000);
function changeImage () {
myImage.setAttribute ("src", imageArray [imageIndex]);
document.getElementById("circle").innerHTML = "";
imageIndex++;
if (imageIndex >= imageArray.length) {
imageIndex =0;
}
$('.timer').circularCountDown()
}
function stopinter () {
clearInterval (inter);
}
})
})
</script>
Any idea about how to do of improve my script ?
Thank you,
Olivier
imageIndex++;
if (imageIndex >= imageArray.length) {
stopinter();
}
Finaly, I make it work with this solution :
$('.timer').circularCountDown()
for (;i==10;i++) {
clearInterval (inter);
}
So I used two images and setInterval to change two pictures continuously over time. When I click on the picture, I will use clearInterval to freeze the image. My question is how do I make the two images change continuously again when I click on it? So it's like a on and off like of scenario. Below is the code which makes the two pictures change continuously and when I click on it, the image freezes and do not change between themselves.
var imageArray = ["_images/korea.jpg","_images/images.jpg"];
var imageIndex = 0;
function changeImage(){
myImage.setAttribute("src", imageArray[imageIndex]);
imageIndex++;
if(imageIndex >= imageArray.length){
imageIndex = 0;
}
}
var test = setInterval(changeImage, 1000);
myImage.onclick = function(){
clearInterval(test);
}
Instead of clearInterval, use Boolean flag and invert it on click of the image
var imageArray = ["_images/korea.jpg", "_images/images.jpg"];
var imageIndex = 0;
var flag = true;
function changeImage() {
if (flag) {
myImage.setAttribute("src", imageArray[imageIndex]);
imageIndex++;
if (imageIndex >= imageArray.length) {
imageIndex = 0;
}
}
}
setInterval(changeImage, 1000);
myImage.onclick = function() {
flag = !flag;
}
Or you can re-initiate setInterval
var imageArray = ["_images/korea.jpg", "_images/images.jpg"];
var imageIndex = 0;
var interval;
var clicked = false;
function changeImage() {
myImage.setAttribute("src", imageArray[imageIndex]);
imageIndex++;
if (imageIndex >= imageArray.length) {
imageIndex = 0;
}
}
interval = setInterval(changeImage, 1000);
myImage.onclick = function() {
if (!clicked) {
clearInterval(interval);
clicked = true;
} else {
interval = setInterval(changeImage, 1000);
clicked = false;
}
}
Have a boolean variable to decide if you are going to change the image. Set or reset this boolean variable when you click on the image without clearing the interval.
var active = true;
myImage.onclick = function(){
active = !active;
}
function changeImage(){
if (!active)
return;
myImage.setAttribute("src", imageArray[imageIndex]);
imageIndex++;
if(imageIndex >= imageArray.length){
imageIndex = 0;
}
}
This might help you :)
<img src="img1.png" id="cimg" onclick="trigger()">
<script>
var imageArray = ["img1.png","img2.png"];
var imageobject = document.getElementById("cimg");
var imagecount = -1;
var changable = true;
function changeimage() {
imagecount++
if(imagecount < imageArray.length) {
imageobject.src = imageArray[imagecount];
}
else {
imagecount = -1;
}
}
function loop() {
if(changable) {
changeimage();
setTimeout(function() { loop(); },1000)
}
}
loop();
function trigger() {
if(changable) {
changable = false;
}
else {
changable = true;
loop();
}
}
</script>
This answer is different to the others because it clears the timer, as opposed to just checking if the flag is set. Your changeImage action stays the same.
var flag = false, timer;
function changeAction() {
if (flag) {
clearInterval(timer);
} else {
timer = setInterval(changeImage, 1000);
}
flag = !flag;
}
changeAction();
myImage.onclick = changeAction;
I want to control this slideshow to start/stop using onclick on #mainImage. At this point, I can get the slides to stop, but I'm stuck on the logic for how to use onclick to start it again. Ideally, I want the slideshow to continue from the array position where it left off as opposed to starting over completely. My instinct tells me this could be solved with some conditional statements, but I just can't get it to work. Thanks for any feedback!
//Grab img
var mainImage = document.getElementById("mainImage");
//Create image array
var imageArray = ["images/drifter.jpg","images/drifter3.jpg","images/drifter4.jpg"];
//Set up array index
var imageIndex = 0;
//Create function to cycle through images
function changeImage() {
mainImage.setAttribute("src",imageArray[imageIndex]);
imageIndex++;
if(imageIndex >= imageArray.length) {
imageIndex = 0;
}
}
//Call cycle function
var intervalHandle = setInterval(changeImage,3000);
mainImage.onclick = function () {
clearInterval(intervalHandle);
}
Add a flag to know when it stopped and when should continue
//Grab img
var mainImage = document.getElementById("mainImage");
//Create image array
var imageArray = ["images/drifter.jpg","images/drifter3.jpg","images/drifter4.jpg"];
//Set up array index
var imageIndex = 0;
// here the flag
var stop = false;
//Create function to cycle through images
function changeImage() {
mainImage.setAttribute("src",imageArray[imageIndex]);
imageIndex++;
if(imageIndex >= imageArray.length) {
imageIndex = 0;
}
}
//Call cycle function
var intervalHandle = setInterval(changeImage,3000);
mainImage.onclick = function () {
if(!stop){
clearInterval(intervalHandle);
stop = true;
} else {
intervalHandle = setInterval(changeImage,3000);
stop = false;
}
}
I'm trying to create an event that changes the picture on mouse over.
var myImage = document.getElementById("mainImage");
var imageArray = ["_images/overlook.jpg","_images/winery_sign.jpg","_images/lunch.jpg",
"_images/bigSur.jpg","_images/flag_photo.jpg","_images/mission_look.jpg"];
var imageIndex = 0;
mainImage.mousover = function changeImage() {
myImage.setAttribute("src",imageArray[imageIndex]);
imageIndex++;
if (imageIndex >= imageArray.length) {
imageIndex = 0;
}
}
// setInterval is also in milliseconds
mainImage.mousover = function () {
var intervalHandle = setInterval(changeImage,1000);
}
myImage.onclick = function() {
clearInterval(intervalHandle);
};
mainImage is an object in HTML and the changeImage function changes current picture.
How should I change my code to make it work?
removed the line that only says "mainImage.mousover =" in the middle
var myImage = document.getElementById("mainImage");
var imageArray = ["_images/overlook.jpg","_images/winery_sign.jpg","_images/lunch.jpg",
"_images/bigSur.jpg","_images/flag_photo.jpg","_images/mission_look.jpg"];
var imageIndex = 0;
function changeImage() {
myImage.setAttribute("src",imageArray[imageIndex]);
imageIndex++;
if (imageIndex >= imageArray.length) {
imageIndex = 0;
}
}
// setInterval is also in milliseconds
mainImage.onmousover = function () {
var intervalHandle = setInterval(changeImage,1000);
}
myImage.onclick = function() {
clearInterval(intervalHandle);
};
You have some type error like:
mainImage.mousover = is syntax error.
change mainImage.mousover to mainImage.onmouseover.
Also you should wrap your code in window.load event handler because it force browser execute your code after image has loaded.
Change code to following:
window.onload = function () {
var myImage = document.getElementById("mainImage");
var imageArray = ["_images/overlook.jpg", "_images/winery_sign.jpg", "_images/lunch.jpg",
"_images/bigSur.jpg", "_images/flag_photo.jpg", "_images/mission_look.jpg"];
var imageIndex = 0;
//mainImage.mousover =
function changeImage() {
myImage.setAttribute("src", imageArray[imageIndex]);
imageIndex++;
if (imageIndex >= imageArray.length) {
imageIndex = 0;
}
}
// setInterval is also in milliseconds
var intervalHandle;
mainImage.onmouseover = function () {
intervalHandle = MyImageInterval();
}
document.getElementById("stopButton").onclick = function () {
clearInterval(intervalHandle);
};
function MyImageInterval() {
return setInterval(changeImage, 1000);
}
}
Notice: You should add an input with type = "button" with Id="stopButton".