ive scripted my self a Image slideshowthere is just the issue that the slideshow stays static on the first Image for each Group.
this Code here is where i have all my Images and then they get selected from it.
< script type = "text/javascript" >
<!-->
var image1 = new Image()
image1.src = "LMH2015_SGVillingen_P1220967.jpg"
var image2 = new Image()
image2.src = "LMH2015_SGVillingen_P1220971.jpg"
var image3 = new Image()
image3.src = "LMH2015_SGVillingen_P1220973.jpg"
var image4 = new Image()
image4.src = "LMH2015_SGVillingen_P1220977.jpg"
var image5 = new Image()
image5.src = "LMH2015_SGVillingen_P1220985.jpg"
//-->
< /script>
and the second part is where the JavaScript should creat the slideshow.
<img src="LMH2015_SGVillingen_P1220967.jpg" width="300" height="300" name="slide" />
<script type="text/javascript">
var step=1
function slideit()
{
document.images.slide.src = eval("image"+step+".src")
if(step<3)
step++
else
step=1
setTimeout("slideit()",3000)
}
slideit()
</script>
<img src="LMH2015_SGVillingen_P1220977.jpg" width="300" height="300" name="slide" />
<script type="text/javascript">
var step=4
function slideit()
{
document.images.slide.src = eval("image"+step+".src")
if(step<5)
step++
else
step=4
setTimeout("slideit()",3000)
}
slideit()
</script>
I hope that there is an easy way of Fixing this Problem and that the way i was having it with the Images still could be left to make it a bit easier is view the Code :D
mark
Try the below function and it is dynamic just call the function with array image and duration.
HTML
<img src="" width="300" height="300" name="slide" />
JS
var imageArr = ["http://stylonica.com/wp-content/uploads/2014/02/Beauty-of-nature-random-4884759-1280-800.jpg", "http://stylonica.com/wp-content/uploads/2014/02/Free-Wallpaper-Nature-Scenes.jpg", "http://www.viralnovelty.net/wp-content/uploads/2014/07/121.jpg"];
function slideShow(imageName, imgArray, duration) {//pass image array and time duration
if(imgArray.constructor !== Array) {
alert("proovide valid image array for slide show");
return false;
}
var step=0;
setInterval(function(){
if(step > imgArray.length - 1){
step = 0; //reset count when the last image
}
document.images[imageName].src = imgArray[step];
step++;
}, duration);
}
slideshow('slide', imageArr, 5000);//call the function with image name
demo link: Slideshow
Related
Forgive, very very very new to Javascript. Adding in a slideshow for a project at uni, Really basic function to run to get these images to work in a slideshow,
But after it completes it exits and doesn't repeat or loop like I would like it too,
Also if i wanted to have a fade animation so its not just one image straight into next what would be the best way?
Thanks.
<-- HTML -->
<img id="Slide" src="images/okc4.jpg" width=640 height=400 />
//javascript
<script type="text/javascript">
var slideimages = new Array()
slideimages[0] = new Image()
slideimages[0].src = "image.jpg"
slideimages[1] = new Image()
slideimages[1].src = "image.jpg"
slideimages[2] = new Image()
slideimages[2].src = "image.jpg"
var step = 0;
function slideit(){
document.getElementById("Slide").src = slideimages[step].src
if (step<=2) {
step++
}else{
step=0
}
setInterval("slideit()",2500)
}
slideit()
</script>
Please see this fiddle: http://jsfiddle.net/8mdLz8tw/1/
Your index does not exist anymore, will grow to 3 and it will trow an error, also I have a made your code a bit different with an anonymous function. In the console you can see the switch and restart, since all the pictures are the same if you use lorempixel :)
var slideimages = new Array()
slideimages[0] = new Image()
slideimages[0].src = "http://lorempixel.com/640/400/"//replaced pics for fiddle
slideimages[1] = new Image()
slideimages[1].src = "http://lorempixel.com/640/400/"
slideimages[2] = new Image()
slideimages[2].src = "http://lorempixel.com/640/400/"
var step = 0;
setInterval(function () {
document.getElementById("Slide").src = slideimages[step].src;
if (step < 2) {//Here was your mistake, if you increase when it is exactly 2 your step will go to three and thus throw an error since you don't have an image indexed with three
step++;
console.log(step);
console.log("switched");
} else {
step = 0;
console.log("restart");
}
}, 2000);
Try:
var slideimages = new Array()
slideimages[0] = new Image()
slideimages[0].src = "image.jpg"
slideimages[1] = new Image()
slideimages[1].src = "image.jpg"
slideimages[2] = new Image()
slideimages[2].src = "image.jpg"
var step = 0;
function slideit(){
document.getElementById("Slide").src = slideimages[step].src
if (step<2) {
step++
}else{
step=0
}
}
setInterval(function(){slideit();},2500)
setInterval is enough to make the function execute every 2.5 seconds.
Link: https://jsfiddle.net/rafaelropota/7qr7qnsx/1/
To make it loop, like you wished, you have to set it to 0 when step reaches a size 1 smaller then the length of the array.
var slideimages = new Array()
slideimages[0] = new Image()
slideimages[0].src = "image.jpg"
slideimages[1] = new Image()
slideimages[1].src = "image2.jpg"
slideimages[2] = new Image()
slideimages[2].src = "image3.jpg"
var step = 0;
function slideit(){
document.getElementById("Slide").src = slideimages[step].src
if (step < slideimages.length-1) {
step++
}else{
step=0
}
}
setInterval(slideit,2500)
See fiddle:
http://jsfiddle.net/bneb2bpw/2/
I think the other answers have covered the loop - but about what you said about a fading transition...
I'd use jQuery to create this effect.
Take a look at jQuery's animate() , that's the most commonly used method.
However, sometimes I like to make my own transition by using two other jQuery methods - fadeIn() and fadeOut().
window.onload = function () {
setInterval(function () {
$("#Slide").fadeOut(2000, function () {
$("#Slide").attr("src", slideimages[i].toString());
$("#Slide").fadeIn();
});
i++;
if (i >= 2) i = 0;
}, 2500);
};
This fades out the image element, and once it has faded out, changes it's source like you were doing before.
After the source has changed, it fades back in - giving a 'fade transition' effect! Working example - here
I don't think that you need to create new Image object to change src elements. Also setInterval() is not used as it intended.
<img id="Slide" src="images/okc4.jpg" width=640 height=400 />
//javascript
<script type="text/javascript">
var slideimages = ["image.jpg","image.jpg","image.jpg"];
var step = 0;
function slideit(){
document.getElementById("Slide").src = slideimages[step]
if (step<slideimages.length) {
step++
}else{
step=0
}
setInterval(slideit,2500)
}
slideit()
</script>
I am a Javascript beginner trying to make a simple slideshow using Javascript. From the work I've done, I'm able to produce only one of the five images. The console says nothing is wrong and I am at a loss as to why the other pictures won't show.
<script>
var images = new Array();
images[0] = new Image();
images[0].src = "burger1.jpg";
images[1] = new Image();
images[1].src = "burger2.jpg";
images[2] = new Image();
images[2].src = "burger3.jpg";
images[3] = new Image();
images[3].src = "burger4.jpg";
images[4] = new Image();
images[4].src = "burger5.jpg";
var slide = 0;
function next(){
if (!document.images) {
return document.getElementById('slideshow').src = images[slide].src
}
if(slide < 5){
slide++;
} else{
slide = 0;
}
setTimeout("next()",3000);
}
next();
</script>
</head>
<body>
<img src="burger1.jpg" id="slideshow" width=100 height=100 />
P.S I do not know jquery.
if (!document.images) {
return document.getElementById('slideshow').src = images[slide].src
}
here !document.images is [object HTMLCollection] and you are checking ! of this use only :
if(slide < 5){
slide++;
} else{
slide = 0;
}
setTimeout(next,3000);
document.getElementById('slideshow').src = images[slide].src
Remove
if (!document.images) {
return document.getElementById('slideshow').src = images[slide].src
}
Add
document.getElementById('slideshow').src = images[slide].src
After setTimeout
There's more to fix in your code so I'll try to show you a better approach then just a quicky:
jsBin demo
var slideshow = document.getElementById('slideshow'), // Cache your element!
images = [ // Create an array of images paths
"burger1.jpg",
"burger2.jpg",
"burger3.jpg"
],
slide = 0,
tot = images.length; // count the total of images
for(var i=0; i<tot; i++){ // preload images (so we don't have to wait for them)
var img = new Image();
img.src = images[i];
}
function next() {
slideshow.src = images[slide++ % tot]; // Modulo operator to loop the counter
setTimeout(next, 3000); // Don't wrap `next` in String
}
next();
I have a slider that starts at click on button and I want every image to be loaded at a offset of 200 px in comparison with the previous one. Here is the code:
var image1 = new Image()
image1.src = "img0.jpg"
var image2 = new Image()
image2.src = "img1.jpg"
var image3 = new Image()
image3.src = "img2.jpg"
var image4 = new Image()
image4.src = "img3.jpg"
var image5 = new Image()
image5.src = "img4.jpg"
var step = 1
function slideit() {
document.images.slide.src = eval("image" + step + ".src")
if (step < 5)
step++
else
step = 1
setTimeout("slideit()", 500)
}
<button onclick="slideit()">Try it</button>
<img src="img0.jpg" name="slide" width="100" height="100" position = "absolute">
I'd like to do this in JavaScript as I do not want to use jQuery in my code.
I actually don't get whats your question. Maybe you should be a bit more precise.
If you want to make a picture slider, then your approach doesn't seems to be right.
Hey this should work for you. I didn't had time to check it, so I hope there are no mistakes in it.
Just update the JS, you can leave the html.
Regards
var images = [
'image1.jpg',
'Image2.jpg',
'...'
];
function slideit()
{
var index = 0;
var container = document.getElementById('yourContainer');
var addPic = function()
{
var img = document.createElement('img');
img.src = images[index];
img.style.position = 'absolute';
img.style.left = index * 200 + 'px';
container.appendChild(img);
index++;
}
setInterval(addPic, 1000);
}
hello everyone i'm trying to get these images to rotate every 5 seconds in HTML, using javascript. I cant figure out why images are not rotating, if someone could assist me that would be great!! thank you.
<!DOCTYPE html>
<html>
<head>
<title>Concert Ads</title>
<script type="text/javascript">
var image1=new Image()
image1.src="concert1.gif"
var image2=new Image()
image2.src="concert2.gif"
var image3=new Image()
image3.src="concert3.gif"
var image4=new Image()
image4.src="concert4.gif"
var image5=new Image()
image5.src="concert5.gif"
</script>
</head>
<body>
<img src="concert1.gif" name="slide" >
<script type="text/javascript">
var step=1
function slideit() {
document.images.slide.src=eval("image"+step+".src")
if(step<5)
step++
else
step=1
setTimeout("slideit()",5000)
slideit()
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<title>Test</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript">
var image1 = new Image()
image1.src = "dummyImg1.jpg"
var image2 = new Image()
image2.src = "dummyImg2.jpg"
var image3 = new Image()
image3.src = "dummyImg3.png"
</script>
</head>
<body>
<img src="dummyImg1.jpg" name="slide" >
<script type="text/javascript">
var step = 1
function slideit() {
document.images["slide"].src = eval("image" + step + ".src")
if (step < 3)
step++
else
step = 1
setTimeout("slideit()", 5000)
}
slideit()
</script>
</body>
</html>
Your setTimeout function is incorrect, as you are passing it a string, not a function, and you don't close your function. It is also very inefficient to create a new image item every time; an array will suit you much better. Finally, I think you want to use setInterval not setTimeout.
A working example is here: http://jsfiddle.net/HUP5W/2
Obviously, the images don't work, but, if you look at the console, it is working correctly.
var image = document.getElementById("img1");
var src = ["concert2.gif","concert3.gif","concert4.gif","concert5.gif","concert1.gif"];
var step=0
function slideit() {
image.src = src[step];
image.alt = src[step];
if(step<4) {
step++;
} else {
step=0;
}
}
setInterval(slideit,5000);
After the timer the image div goes blank instead of switching to the next picture. It is supposed to cycle images 1-4 and repeat indefinitely
$('.carouselImageJavascriptActive').removeClass('carouselImageJavascriptActive');
$(this).addClass('carouselImageJavascriptActive');
var imgs=$(this).attr('.carouselImage')
var self = $(this);
var myImage = new Array();
var x=0;
myImage[0]='img/image1.jpg';
myImage[1]='img/image2.jpg';
myImage[2]='img/image3.jpg';
myImage[3]='img/image4.jpg';
setTimeout(function() {
var img = document.getElementById('.carouselImageJavascriptActive');
img.src = myImage[x];
x++;
if(x >= myImage.length){
x = 0;
}
},2000);
HTML
<div id='challengeTwoImageJavascript' class='sectionChallengeCarouselImage'>
<img id='imgj1' imgn='1' class='carouselImage carouselImageJavascriptActive' src='img/image1.jpg'/>
<img id='imgj2' imgn='2' class='carouselImage' src='img/image2.jpg'/>
<img id='imgj3' imgn='3' class='carouselImage' src='img/image3.jpg'/>
<img id='imgj4' imgn='4'class='carouselImage' src='img/image4.jpg'/>
</div>
None of those images have an id of '.carouselImageJavascriptActive'.