I'm trying to do a slideshow gallery in Javascript, but it doesn't work... When I run this code, the src goes to veyron.jpg instantly, skipping the lamborghini.jpg.
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<img id="img" src="ferrari.jpg" />
<script>
img = document.getElementById("img");
images = new Array("ferrari.jpg","lamborghini.jpg","veyron.jpg");
end = images.length -1;
window.onload = setInterval(slide,1000);
function slide(){
for(i=0;i<=end;i++){
img.src = images[i];
}
}
</script>
</body>
</html>
why loop is exist here, you are casting all the images in all.
Do it with increment variable with start
<script>
var img = document.getElementById("img");
var images = new Array("ferrari.jpg","lamborghini.jpg","veyron.jpg");
var end = images.length -1;
var start = 0;
window.onload = setInterval(slide,1000);
function slide(){
img.src = images[start%end];
start++;
}
</script>
example fiddle
Related
I need some help with my code. The task is to show an image by using a button. But the image has to show gradually with the CSS property "opacity".
The image should start at opacity 0 and should end at opacity 1.
Our teacher suggests us using "parsefloat" so the strings from CSS could be recognized by JS as numbers.
I do not really know why my code is not working. I would really appreciate it if you could show me where my mistake is.
Here is my code:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Aufgabe 12.2</title>
<script>
var go = function() {
var opac = function(delay) {
var img = document.createElement("img");
img.src = "http://www.google.com/intl/en_com/images/logo_plain.png";
var level = 0;
var step = function(){
img.style.opacity = level;
if(level <= 1) {
level += .1;
setTimeout(step, delay);
}
}
step();
}
opac(100);
};
</script>
<body>
<input type = "button" onclick = "go();" value = "Click me"/>
</body>
</head>
</html>
your code almost works, the only problem is that after you create your img variable, you never append it to the document. You create the image and correctly make it fade in but it is not part of the document so it will not be rendered. To fix this, addIn this line, document grabs a reference to the whole HTML document, and .body references the body tag. The .appendChild tells it to add a child element, to the body.
Here is a working example:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Aufgabe 12.2</title>
<script>
var go = function () {
var opac = function (delay) {
var img = document.createElement('img');
img.src =
'http://www.google.com/intl/en_com/images/logo_plain.png';
document.body.appendChild(img);
var level = 0;
var step = function () {
img.style.opacity = level;
if (level <= 1) {
level += 0.1;
setTimeout(step, delay);
}
};
step();
};
opac(100);
};
</script>
<body>
<input type="button" onclick="go();" value="Click me" />
</body>
</head>
</html>
Here is a link with more information
You need to append the img node to the DOM:
const btn = document.querySelector("input")
btn.onclick = () => go(100)
var go = function(delay) {
var img = document.createElement("img");
img.src = "http://www.google.com/intl/en_com/images/logo_plain.png";
document.body.append(img)
var level = 0;
const step = function() {
img.style.opacity = level;
if (level <= 1) {
level += .1;
setTimeout(step, delay);
}
}
step();
}
<input type="button" value="Click me" />
My automatic image slider only shows the first two images of the images array while tere are three images. I can't figure out why it is not working properly, I hope someone might know what is going wrong.
var images = [];
var i = 0;
//image array
images[0] = 'https://placeimg.com/900/600/animals?t=1515065784396';
images[1] = 'https://placeimg.com/900/600/animals?t=1515065867693';
images[2] = 'https://placeimg.com/900/600/animals?t=1515065784396';
function changeImage() {
"use strict";
document.getElementById("slider").src = images[i];
if (i < images.length - 1) {
i += 1;
} else {
i = 0;
}
setInterval(changeImage, 2000);
}
window.onload = changeImage;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title> Automatic Image Slider </title>
<link rel="stylesheet" href="style.css">
<script src="script.js"></script>
</head>
<body>
<img id="slider">
</body>
</html>
Here it is! I've modified your code so that it now will work, pay attention not to reinitialize the interval at every changeImage() call ;)
//image array
var images = [];
images[0] = 'https://placeimg.com/900/600/animals?t=1515065784396';
images[1] = 'https://placeimg.com/900/600/animals?t=1515065867693';
images[2] = 'https://placeimg.com/900/600/animals?t=1515065784397';
var i = -1;
function changeImage() {
"use strict";
++i;
if (i >= images.length) {
i = 0;
}
document.getElementById("slider").src = images[i];
}
setInterval(changeImage, 2000);
window.onload = changeImage;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title> Automatic Image Slider </title>
<link rel="stylesheet" href="style.css">
<script src="script.js"></script>
</head>
<body>
<img id="slider">
</body>
</html>
images.length = 3
but
images.length - 1 = 2
so
(i < images.length - 1)
this condition work inly for i = 0 and i = 1
use this condition instead
(i < images.length)
Actually, your code works with a little bug. Note that your first and last image is the same.
And the huge bug of your code is that you are creating a new interval at each changeImage call, so the last image is being placed but fastly replaced for the first image.
Remove the setInterval(changeImage, 2000) from the changeImage function and call it like this:
window.onload = function() {
changeImage();
setInterval(changeImage, 2000)
}
Because your condition if (i < images.length - 1) is true only for 0 an 1
If you do if (i<=images.length-1) you will get all the three images
I am trying to do a traffic light sequence which runs on a timed basis automatically without user input. I have got the code working now, but it only runs through once and then stops. So how can I change this so it keeps going?
Here is my code:
<!DOCTYPE html>
<html>
<head>
<script>
var images = new Array()
images[0] = "image2.jpg";
images[1] = "image3.jpg";
images[2] = "image4.jpg";
setInterval("changeImage()", 3000);
var x=0;
function changeImage() {
document.getElementById("img").src=images[x]
x++;
}
</script>
</head>
<body>
<img id="img" src="image1.jpg">
</body>
</html>
Apply the remainder assignment %= to the counter with the length of the array.
function changeImage() {
document.getElementById("img").src = images[x];
x++;
x %= images.length;
}
I am trying to crete image slide using java script .Here is my code
<script type="text/javascript">
//variable that will increment through the images
var step = 1
function slideit() {
var image1 = ["imges/IMG_0579.JPG","imges/IMG_0580.JPG","imges/IMG_0581.JPG"];
//var image2 = new Image()
// var image3 = new Image()
//if browser does not support the image object, exit.
document.write("hello");
document.getElementById("slide").src = image1[step];
document.write("kjds");
if (step < 3)
step++;
else
step = 1;
//call function "slideit()" every 2.5 seconds
setTimeout("slideit()", 2500);
}
slideit();
//-->
</script>
I am getting console error src is not null
here is img element
<img id="slide" src="imges/IMG_0588.JPG" />
well, I'm not good at expressing,so I give you the code directly.
<html>
<head>
<title>test</title>
</head>
<body>
<img id="slide" src="#" />
</body>
<script type="text/javascript">
var step = 1
function slideit() {
var image1 = ["imges/IMG_0579.JPG","imges/IMG_0580.JPG","imges/IMG_0581.JPG"];
document.getElementById("slide").src = image1[step];
if (step < 3)
step++;
else
step = 1;
//call function "slideit()" every 2.5 seconds
setTimeout("slideit()", 2500);
}
slideit();
</script>
</html>
I have an image slideshow which will work in any other browser I try but not in IE - it just does nothing but display the primary image. Please could someone tell me I not going mad and it is a simple fix that I can't see.
Many thanks
Mickeyjay.
Code below:
<div id="image_slide"><img src="images/.......jpg" id="slideit" name="slideit" border="0">
<script type="text/javascript">
var dimages=new Array();
var numImages=3;
dimages[0]=new Image();
dimages[0].src="images/.......jpg";
dimages[1]=new Image();
dimages[1].src="images/.......jpg";
dimages[2]=new Image();
dimages[2].src="images/.......jpg";
var curImage=-1;
function swapPicture()
{
if (document.images)
{
var nextImage=curImage+1;
if (nextImage>=numImages)
nextImage=0;
if (dimages[nextImage] && dimages[nextImage].complete)
{
var target=0;
if (document.images.slideit)
target=document.images.slideit;
if (document.all && document.getElementById("slideit"))
target=document.getElementById("slideit");
if (target)
{
target.src=dimages[nextImage].src;
curImage=nextImage;
}
setTimeout("swapPicture()", 1500);
}
else
{
setTimeout("swapPicture()", 150);
}
}
}
setTimeout("swapPicture()", 1500);
</script>
Try this simplified test, the idea is to load your pictures before start to swap, and will not need to test .complete that way.
<html>
<head>
<title>Example</title>
</head>
<body>
<div id="image_slide"><img src="intro.jpg"
id="slideit" name="slideit" border="0"></div>
<script type="text/javascript">
var curImage = -1;
var numImages = 2;
var dimages = new Array();
function loadPictures()
{
dimages[0] = new Image();
dimages[0].src = "test1.jpg";
dimages[1] = new Image();
dimages[1].src = "test2.jpg";
setTimeout(swapPicture, 3000);
}
function swapPicture()
{
var nextImage = curImage + 1;
if (nextImage >= numImages)
nextImage = 0;
document.images.slideit.src = dimages[nextImage].src;
curImage = nextImage;
setTimeout(swapPicture, 1500);
}
setTimeout(loadPictures, 1500);
</script>
</body>
</html>