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;
Related
Hi! I'm trying to create a carousel/image slider which is automatic and reactable to onclick event but for somereason the onclick event messesup the automatic flow of the slider even though the code makes perfect sens!
Could someone tell me whats wrong in this code and a solution to fix it please! thank you!
var i = 0;
var images = [];
var time = 3000;
images[0] = "https://cache.lovethispic.com/uploaded_images/162514-Just-Breathe.jpg";
images[1] = "https://cache.lovethispic.com/uploaded_images/162513-Be-Someone-s-Sunshine.jpg";
images[2] = "https://cache.lovethispic.com/uploaded_images/162508-Don-t-Cry-.jpg";
var nextbutton=document.querySelector("#rightbutton");
nextbutton.addEventListener("click",rightbuttonclick);
var prevbutton=document.querySelector("#leftbutton");
prevbutton.addEventListener("click",leftbuttonclick);
function rightbuttonclick(){
i++;
changeImg();
}
function leftbuttonclick(){
i--;
changeImg();
}
function changeImg(){
document.getElementById('startersliders').src = images[i];
if(i < images.length - 1){
i++;
}
else {
i = 0;
}
// Run function every x seconds
setTimeout("changeImg()", time);
}
function changenext(){
i++;
changeImg();
}
// Run function when page loads
window.onload=changeImg;
<button id="leftbutton">left</button>
<img id="startersliders" width="400" height="200"/>
<button id="rightbutton">right</button>
here is a code that can help you,
var prevbutton=document.querySelector("#leftbutton");
//nextbutton.addEventListener("click",leftbuttonclick);
prevbutton.addEventListener("click",leftbuttonclick);
Keep a variable eg: setTime that decides whether to call setTimeout again or not.
function rightbuttonclick() {
i++;
changeImg(false);
}
function leftbuttonclick() {
i--;
changeImg(false);
}
function changeImg(setTime) {
document.getElementById('startersliders').src = images[i];
if (i < images.length - 1) {
i++;
} else {
i = 0;
}
// Run function every x seconds
if (setTime !== false)
setTimeout("changeImg()", time);
}
var i = 0;
var images = [];
var time = 3000;
images[0] = "https://cache.lovethispic.com/uploaded_images/162514-Just-Breathe.jpg";
images[1] = "https://cache.lovethispic.com/uploaded_images/162513-Be-Someone-s-Sunshine.jpg";
images[2] = "https://cache.lovethispic.com/uploaded_images/162508-Don-t-Cry-.jpg";
var nextbutton = document.querySelector("#rightbutton");
nextbutton.addEventListener("click", rightbuttonclick);
var prevbutton = document.querySelector("#leftbutton");
prevbutton.addEventListener("click", leftbuttonclick);
function rightbuttonclick() {
i++;
changeImg(false);
}
function leftbuttonclick() {
i--;
changeImg(false);
}
function changeImg(setTime) {
document.getElementById('startersliders').src = images[i];
if (i < images.length - 1) {
i++;
} else {
i = 0;
}
// Run function every x seconds
if (setTime !== false)
setTimeout("changeImg()", time);
}
// Run function when page loads
window.onload = changeImg();
<button id="leftbutton">left</button>
<img id="startersliders" width="400" height="200" />
<button id="rightbutton">right</button>
Or you can use setInterval instead of setTimeout as shown below:
var i = 0;
var images = [];
var time = 3000;
images[0] = "https://cache.lovethispic.com/uploaded_images/162514-Just-Breathe.jpg";
images[1] = "https://cache.lovethispic.com/uploaded_images/162513-Be-Someone-s-Sunshine.jpg";
images[2] = "https://cache.lovethispic.com/uploaded_images/162508-Don-t-Cry-.jpg";
var nextbutton = document.querySelector("#rightbutton");
nextbutton.addEventListener("click", rightbuttonclick);
var prevbutton = document.querySelector("#leftbutton");
prevbutton.addEventListener("click", leftbuttonclick);
function rightbuttonclick() {
i++;
changeImg(false);
}
function leftbuttonclick() {
i--;
changeImg(false);
}
function changeImg(setTime) {
document.getElementById('startersliders').src = images[i];
if (i < images.length - 1) {
i++;
} else {
i = 0;
}
}
window.onload = changeImg();
setInterval(function() {
changeImg()
}, time);
<button id="leftbutton">left</button>
<img id="startersliders" width="400" height="200" />
<button id="rightbutton">right</button>
add a clearTimeout function to chageImg() and it will work,
as to why it was behaving strangely is because setTimeout was been called multiple times. you should always be careful when using setInverval or setTimeout. here is a code snippet
function changeImg(){
clearTimeout(interval);
document.getElementById('startersliders').src = images[i];
if(i < images.length - 1){
i++;
}
else {
i = 0;
}
// Run function every x seconds
interval = setTimeout("changeImg()", time);
}
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);
}
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".
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
});