JS slideshow - auto-play interrupting manual turn - javascript

i just made a simple slideshow which changes images automatically and also has manual option so you can go forward and backward with images when you want.
Here is the problem: Auto function which changes the images is set to every 3 seconds. But if you for example click to change the slide after 2.5 seconds,the slide will change, but after 0.5 seconds auto function will also change to the next slide.
So i other way,auto function is interrupting manual change, is there any way to reset autofunction after the slideshow is changed manually?
here is the html code:
<!doctype html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<title>Chapter 11 - HTML Forms and JavaScript</title>
</head>
<body onload="autoRun()">
<img src="slika1.jpg" id="slideshow" width="700px",
height="350px">
<br/>
<p id="caption">slika1</p>
Next Slide<br/>
Previous Slide
<script src="slideshow.js"></script>
</body>
</html>
JS code:
document.getElementById('buttonNext').onclick=function(){
changeImage(1);
return false;
}
document.getElementById('buttonPrevious').onclick=function(){
changeImage(-1);
return false;
}
var images =["slika1.jpg","slika2.jpg", "slika3.jpg" ];
var caption=["slika1", "slika2", "slika3"];
var imageNumber=0;
var imageLength=images.length -1;
function changeImage(x){
imageNumber+=x;
if(imageNumber > imageLength){
imageNumber = 0;
}
if(imageNumber < 0){
imageNumber = imageLength;
}
document.getElementById('slideshow').src=images[imageNumber];
document.getElementById('caption').innerHTML=caption[imageNumber];
return false;
}
function autoRun(){
setInterval("changeImage(1)", 3000);
}

This is quite easy to do.
1) Add a global variable var timer;
2) At the start of your changeImage() function, add this: autoRun();
3) Change your autoRun() function to this:
function autoRun(){
clearTimeout(timer);
timer = setTimeout("changeImage(1)", 3000);
}
This way the autorun-timer is reset everytime changeImage() is invoked, whether that happens because you manually changed the slide or the autorun-function did.

Related

How to add a timer to one picture out of multiple pics on HTML

So I have this HTML code to just show pictures on a browser, every click transitions to the next picture. My question is how can i make Slide13 automatically go to Slide14 after 4 seconds then go back to clicking to transition between pictures? Thanks!!
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>Slide1.PNG</title>
</head>
<body onclick="step()">
<img id="image_id" src="" style="width:100%;height:100%">
</body>
<script type="text/javascript">
var images=[
"Slide1.PNG",
"Slide2.PNG",
"Slide3.PNG",
"Slide4.PNG",
"Slide5.PNG",
"Slide6.PNG",
"Slide7.PNG",
"Slide8.PNG",
"Slide9.PNG",
"Slide10.PNG",
"Slide11.PNG",
"Slide12.PNG",
"Slide13.GIF",
"Slide14.PNG",
"Slide15.GIF",
"Slide16.PNG",
"Slide17.PNG",
"Slide18.PNG",
"Slide19.PNG",
"Slide20.GIF",
"Slide21.PNG",
"Slide22.PNG",
"Slide23.PNG",
"Slide24.PNG",
"Slide25.PNG",
"Slide26.PNG",
"Slide27.PNG",
"Slide28.PNG",
"Slide29.PNG",
"Slide30.PNG",
"Slide31.PNG",
"Slide32.PNG",
"Slide33.PNG",
"Slide34.PNG"
];
var index=0;
var imageObjects=images.map(function(img){var imgTag=new Image();imgTag.src=img});
function step(){
document.getElementById('image_id').src=images[(index++)%images.length];
}
step();
</script>
</html>
Add this to your step:
var image = document.getElementById("image_id").src;
if (image=="Slide13.GIF") {
setTimeout(function(){
document.getElementById('image_id').click();}, 4000);
}
It will check on every step the source value of image, when it hits Slide13.GIF it will emulate the click on it after 4 seconds and go to next one.
See below demo, on 3ed image it will click it after 2 seconds.
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>Slide1.PNG</title>
</head>
<body onclick="step()">
<img id="image_id" src="" style="width:100%;height:100%">
</body>
<script type="text/javascript">
var images=[
"https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Ftse1.mm.bing.net%2Fth%3Fid%3DOIP.zYTlTH6b_YYEeNCvZsznjgHaD5%26pid%3DApi&f=1",
"https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Ftse1.mm.bing.net%2Fth%3Fid%3DOIP.ZJA-xTrw2bHQaUXA6buoGwHaDt%26pid%3DApi&f=1",
"https://media2.giphy.com/media/YmbxC8Bkj9bZ4yu4Le/source.gif",
"https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Ftse1.mm.bing.net%2Fth%3Fid%3DOIP.qz01j4K29bmGqCy1hIwGswHaFf%26pid%3DApi&f=1",
"https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Fmedia1.tenor.com%2Fimages%2Fea490bc9d89afaf7d2431a0374aef65c%2Ftenor.gif%3Fitemid%3D15761601&f=1&nofb=1",
"https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Ftse1.mm.bing.net%2Fth%3Fid%3DOIP.wae3QtVQ_QQvkeaQ3alxzgHaEY%26pid%3DApi&f=1",
"https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Ftse1.mm.bing.net%2Fth%3Fid%3DOIP.xd0rh27OUOrMUw8_ACG0HwHaDt%26pid%3DApi&f=1",
"https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Ftse1.mm.bing.net%2Fth%3Fid%3DOIP.adQHsWv9A37aVRLNDLLlkwHaEK%26pid%3DApi&f=1",
"https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Ftse1.mm.bing.net%2Fth%3Fid%3DOIP.3nRZ72gyQTUakC-ZbhQ_MQHaHa%26pid%3DApi&f=1"
];
var index=0;
var imageObjects=images.map(function(img){var imgTag=new Image();imgTag.src=img});
function step(){
document.getElementById('image_id').src=images[(index++)%images.length];
var image = document.getElementById("image_id").src;
console.log(image);
if (image=="https://media2.giphy.com/media/YmbxC8Bkj9bZ4yu4Le/source.gif" || image=="https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Fmedia1.tenor.com%2Fimages%2Fea490bc9d89afaf7d2431a0374aef65c%2Ftenor.gif%3Fitemid%3D15761601&f=1&nofb=1") {
setTimeout(function(){ document.getElementById('image_id').click(); }, 3000);
}
}
step();
</script>
</html>
EDIT:
It does work with gifs, i Just added two of them, on step 3 and 5. Also if you need more conditions in your if statement separate them with || Like so:
if (image=="https://media2.giphy.com/media/YmbxC8Bkj9bZ4yu4Le/source.gif" ||
image=="https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Fmedia1.tenor.com%2Fimages%2Fea490bc9d89afaf7d2431a0374aef65c%2Ftenor.gif%3Fitemid%3D15761601&f=1&nofb=1") {
As seen in edited demo now it will do a click on two gifs, number 3 and 5.
You can add console.log(image); below image variable to see correct image source and use that in condition.
If you have problems with finding paths you can use this as your conditions:
if (image.indexOf("Slide13.GIF") >= 0 || image.indexOf(" other pic ") >= 0")
This will check if image variable of source value contains your wanted image title.

How to add a timer for images in JavaScript?

I've been working on this code which displays the next traffic light when a button is pressed. Now I am trying to diplay the images in the array every 3 seconds. I have tried using setTimeOut in my code but my code juts stays on the first traffic light.
code:
EDIT(FIXED)
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Code</h1>
<p>Traffic Light</p>
<img id="traffic" src="only red1.jpg">
<button type="button" onclick="ChangeLight()">Change Light</button>
<script>
var list = ["only red1.jpg","red-yellow 2.jpg", "green3.jpg","yellowonly4.jpg"];
var nextlight = 0;
var timer;
function ChangeLight() {
nextlight = nextlight + 1;
if (nextlight == list.length)
nextlight = 0;
var firstlight = document.getElementById('traffic');
firstlight.src = list[nextlight];
}
timer = setInterval(ChangeLight, 3000);
</script>
</body>
</html>
Solution:
timer = setInterval("ChangeLight", 3000);
Put it out of the function ^^
2 things:
It's supposed to be setInterval(ChangeLight, 3000);
timer is inside the ChangeLight function. You should move it outside.
You may want to change timer = setTimeout("ChangeLight", 3000); into timer = setTimeout(ChangeLight, 3000);.

JavaScript Timeout Function

I was looking in other posts for the answer, but the answers never seem to work in my favor. I'm trying to make an image fade when the page finishes loading. I've figured out I can loop until the counter reaches 0 (when image is invisible) and fade the image slowly.
The problem is, the setTimeout() function doesn't seem to be working.
Here's the code:
function timeout() {
setTimeout(function () {
//A comment said something about looping,
//but it was confusing to understand...
}, 50);
}
function setup() {
var load = document.getElementById('img');
load.style.opacity = 0 //Start at being visible
for (var i = 10; i > 0; i = i - 0.1) { //For loop
load.style.opacity = i; //Use the index variable and use that to set the opacity
setTimeout(); //Set the timeout, but this function does not pause the program for some reason...
//I need to pause for 0.05 seconds.
}
}
window.addEventListener('load', setup, true); //Add event listener for when the page is done loading
<!DOCTYPE html>
<html>
<head>
<title>Webpage</title>
</head>
<body>
<div id="img">
<img src="http://www.downgraf.com/wp-content/uploads/2014/09/01-progress.gif" width="200" height="150">
</div>
</body>
</html>
I put the javascript in a seperate file, I just can't access it from Stack Overflow...
Can someone help? And also, sometimes the image can be finicky at times as well, like sometimes it won't hide like it's supposed to do. Thanks!
You declared a setTimeout without arguments, hence the error:
'Window': 1 argument required, but only 0 present."
Give it the appropriate amount of arguments:
for (var i = 10; i > 0; i = i - 0.1) { //For the loop
load.style.opacity = i;
setTimeout(functionName, milliseconds);
}
If you intended to use your timeout() function instead, call it. You're just instantiating a new setTimeout from the one you already created in the timeout() function.
You can use a recursive function instead of a loop
var load = document.getElementById('img');
function setup() {
load.style.opacity = "1"; //Start at being visible
timeout(1);
}
function timeout(i) {
setTimeout(function() {
i -= 0.1;
if(i<=0)
return;
load.style.opacity = i.toString();
timeout(i);
}, 200);
}
window.addEventListener('load', setup, true); //Add event listener for when the page is done loading
<!DOCTYPE html>
<html>
<head>
<title>Webpage</title>
</head>
<body>
<div>
<img src="http://www.downgraf.com/wp-content/uploads/2014/09/01-progress.gif" width="200" height="150" id="img">
</div>
</body>
</html>
Basically you want to countdown the opacity with a recursive call. Here we are going from 1 down to 0 in 0.01 increments. The setTimeout will trigger the next recursive call after pausing for 50 msecs. These values, can of course, be adjusted as needed but the opacity needs to be a number from 1 (visible) to 0 (invisible).
function setOpacity(el, lvl) {
el.style.opacity = lvl;
}
function countDown(el, lvl) {
function action(el, lvl) {
return function () {
countDown(el, lvl);
}
}
setOpacity(el, lvl);
if (lvl > 0) {
lvl -= 0.01
setTimeout(action(el, lvl), 50);
}
}
function setup() {
var load = document.getElementById('img');
load.style.opacity = 1; //Start at being visible
countDown(load, 1);
}
window.addEventListener('load', setup, true);
<!DOCTYPE html>
<html>
<head>
<title>Webpage</title>
</head>
<body>
<div id="img">
<img src="http://www.downgraf.com/wp-content/uploads/2014/09/01-progress.gif" width="200" height="150">
</div>
</body>
</html>
function setup() {
var load = document.getElementById('img');
(function(){
var i = 1;
setTimeout(function () {
i -= 0.1;
load.style.opacity = i;
if (i > 0) {
setTimeout(arguments.callee, 100);
}
}, 100);
})();
}
window.addEventListener('load', setup, true); //Add event listener for when the page is done loading
<div id="img">
<img src="http://www.downgraf.com/wp-content/uploads/2014/09/01-progress.gif" width="200" height="150">
</div>

new mail counter javascript

I am having some major problems with a javascript app I'm working on. I want my window to open to a closed envelope and then after five seconds to change to an open envelope with a little 1 counter in the corner of it. I want the counter to continue to move up every five seconds unless the envelope is clicked. If clicked I want the count to start over. So far I have only gotten my closed envelope showing up. I'm new and have no idea what I am doing wrong so any help would be awesome!
My html:
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="mail.js"></script>
</head>
<body>
<img id"closed" src="closed.png" onclick="resetTimer()">
<span id="counter"></span>
</body>
</html>
And my JavaScript:
window.onload = function(){
var counter = 0;
var timer = setInterval(
function(){
counter++;
document.getElementById("demo").firstChild.nodeValue = counter;
},
5000
);
function openEnvelope(){
var img = document.getElementById("picture");
if (counter > 1){
img.src = "open.png"
}
}
open = setTimeout("open()", 1000);
function resetTimer(){
clearInterval(timer);
}
}
You need to increment your counter and set the counter span to have that value :
var counter = 0;
//Create your timer (setTimeout will only run once, setInterval will start again once run.
//1000 = 1 second
var timer = setInterval(openEnvelope, 1000);
function openEnvelope() {
var img = document.getElementById("picture");
var counterSpan = document.getElementById("counter");
if (counter > 1) {
img.src = "open.png"
counterSpan.innerHTML = counter;
}
//Add 1 to Counter
counter++;
}
function resetTimer() {
clearInterval(timer);
counter = 0;
}
This will run your openEnvelope function every second, and if the counter value is more than 1 it will set the Img Source to be open.png and the counter span to have the counters value. On the click of the Envelope it will clear the timer and reset the counter.
And your HTML will become :
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="mail.js"></script>
</head>
<body>
<img id"picture" src="closed.png" onclick="resetTimer()">
<span id="counter"></span>
</body>
</html>
Here is a working JSFiddle for your problem, try creating a blank page and copying the HTML straight into the <body> tag and the Javascript into <script></script> tags in the <head> of your page.

when mouse over image slide is start as gif image

I have 5 images in a same folder.
1.jpg,2.jpg,3.jpg,4.jpg,5.jpg
I will be show only one image on my webpage.
example
<body>
<img src="1.jpg">
</body>
when visitor is mouse over on image, image will be change to 2.jpg and,3.jpg and....will be stop at 5.jpg.Slideshow is similar as a gif image.
Please How to write javascript or jquery .
Please tell me simplest way.
Thank my dear friend.
I found simalor question in this website.But I can't found complete answer for me.
If this question is duplicate, so sorry
please forgive me for my poor english useage.
You can use jQuery's hover event and pass in the onenter and onout methods. On enter you can call and setup an interval to increment the number of your image, and on out you want to stop it by clearing your interval.
<!DOCTYPE html>
<html>
<head>
<title>image</title>
</head>
<body>
<img id="img" src="1.jpg" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript">
var interval = null;
function changeImage(){
var nextNum = parseInt($('#img').attr('src').replace('.jpg',''), 10) + 1;
// If you want it to repeat back to 1 after 5
nextNum = nextNum > 5 ? 1 : nextNum;
$('#img').attr('src', nextNum+'.jpg');
}
$('#img').hover(
function(){
// Call change Image every 50ms
interval = setInterval(changeImage, 50);
changeImage();
},
function(){
// Stop the call
interval && clearInterval(interval);
}
);
</script>
</body>
</html>​​​​​​​​​​​​

Categories