Develop Reference

Javascript Slideshow using an array with img URLs

I'm a beginner in JS, and I can't figure out what's wrong with my attempted slideshow. I understand this may seem like a repeat, and I've found a different, working way, to display a slideshow in JS, but I am simply confused about what is wrong with my code. Every single version of slideshow code I've seen sets all of the image urls in HTML and then hides them and only displays one of them using JS, but why wouldn't mine, with image urls simply set in an array, work?
<img id="sideimg" src="images/image1.jpg" alt="penguin" />
<script>
next();
var next=function(){
for(var i=0;i<3;i++){
var slide=document.getElementById("sideimg");
var slides=["images/image1.jpg","images/image2.jpg","images/image3.jpg"]
slide.src=slides[i];
timeOut();
if(i>=3){
i=0;
};
};
var timeOut=function(){
setTimeout(next,1000);
}
};
</script>

Order of functions is not right in your sample
You also need i to be defined outside the function and there is no need for the for loop
The following works for me in chrome
<img id="sideimg" src="images/image1.jpg" alt="penguin" />
<script>
var i = 0
var timeOut=function(){
setTimeout(next,1000);
}
var next=function(){
var slide=document.getElementById("sideimg");
var slides=["images/image1.jpg","images/image2.jpg","images/image3.jpg"]
slide.src=slides[i];
timeOut();
i++;
if(i>=3){
i=0;
};
};
next();
</script>
We could also define i within next as follows using IIFE (immediately invoked function expression). It is also better to declare slides and slide outside the function that is invoked every interval.
<img id="sideimg" src="images/image1.jpg" alt="penguin" />
<script>
var timeOut=function(){
setTimeout(next,1000);
}
var next=function(){
var i = 0;
var slides=["images/image1.jpg","images/image2.jpg","images/image3.jpg"];
var slide=document.getElementById("sideimg");
return function() {
slide.src=slides[i];
timeOut();
i++;
if(i>=3){
i=0;
};
};
}();
next();
</script>

Try moving the array OUTSIDE of the loop:
var next=function(slides){
var slide=document.getElementById("sideimg");
var slides=["images/image1.jpg","images/image2.jpg","images/image3.jpg"]
for(var i=0;i<3;i++){
slide.src=slides[i];
...
};
Here is another possibility (WARNING: I haven't actually tried it):
How do I add a delay in a JavaScript loop?
<img id="sideimg" src="images/image1.jpg" alt="penguin" />
<script type="text/javascript">
var slides=["images/image1.jpg","images/image2.jpg","images/image3.jpg"]
var slide=document.getElementById("sideimg");
var i = 0;
var loop = function () {
sideimg.src=slides[i]; // Display current image
i++;
if (i >= slides.length)
i = 0;
setTimeout(function () { // call setTimeout when the loop is called
loop(); // .. again which will trigger another
}, 1000)
};
};
</script>
};

Adding different images to a form according to name using if/else

I am trying to insert image values into the html to replace the src according to the name so if the name for the templateName = Javascript I can make the src value = something like say (http://www.w3devcampus.com/wp-content/uploads/logoAndOther/logo_JavaScript.png) and do that for other categories as well using an if/else statement in javascript.
my script look like this but it has a few errors with the syntax
var imageChoosernator = function () {
if (#templateName == "Javascript")
{
img = <img src="htp://www.w3devcampus.com/wp-content/uploads/logoAndOther/logo_JavaScript.png">;
}
` }
Can someone guide me toward the proper solution?

# in #templateName is wrong. Know your allowed variable characters.
img = <img the <img is an unstarted String. Know how to enclose values into String.
` <<< you cannot have such character floating around your code (hopefully just an edit typo).
Since you didn't showed most of your code, a fix would be something like:
var img = "";
var templateName = "Javascript";
function imageChoosernator () {
if (templateName === "Javascript") { // remove unallowed #
img = '<img src="js.png">'; // enclose into String
} else {
img = '<img src="someting.png">';
}
// Finally append img to element #imgContainer
document.querySelector("#imgContainer").insertAdjacentHTML("beforeend", img );
}
imageChoosernator(); // Do the magic

You can use jQuery .prepend() method to replace the image src on loading the query into the page.
If in html you have given the id name as 'JavaScript' like-
div id="JavaScript"><img id="imgNew1" src="oldImg1.png" />
div id="templateName2"><img id="imgNew2" src="oldImg2.png" />
To change the image source following can be used-
$('#templateName1').prepend('<img id="imgNew" src="newImg1.png" />')
$('#templateName2').prepend('<img id="imgNew" src="newImg2.png" />')
You need to read the documentation here
To automatize the src change while creating intances of the same will go like-
<html>
<head>
<script type="text/javascript">
var slideimages = new Array() // create new array to preload images
slideimages[0] = new Image() // create new instance of image object
slideimages[0].src = "firstImg.png" // set image object src property to an image's src, preloading that image in the process
slideimages[1] = new Image()
slideimages[1].src = "secondcarImg.png"
slideimages[2] = new Image()
slideimages[2].src = "thirdImg.png"
</script>
</head>
<body>
<img src="firstImg.img" id="slide" width=100 height=56 />
<script type="text/javascript">
//variable that will increment through the images
var step = 0
var whichimage = 0
function slideit(){
//if browser does not support the image object, exit.
if (!document.images)
return
document.getElementById('slide').src = slideimages[step].src
whichimage = step
if (step<2)
step++
else
step=0
}
</script>
</body>
</html>

making two slideshows html

I can successfully make a slide show in html but im trying to make two and its not working, here is my code:
<script type="text/javascript">
var image1 = new Image()
image1.src = "img/home/residential.gif"
var image2 = new Image()
image2.src = "img/home/1.gif"
var image3 = new Image()
image3.src = "img/home/2.gif"
</script>
<table align="center" width="70%"cellpadding=5 cellspacing=5>
<tr>
<td rowspan=2 align=center><a href="artistic.html"><figure><img src="logo1.gif" alt="Atristic Impressions" width="400" height="600" name="slide"/><figcaption style="color: #610B21">Artistic Impressions</figure></td>
<script type="text/javascript">
var step=1;
function slide()
{
document.images.slide.src = eval("image"+step+".src");
if(step<3)
step++;
else
step=1;
setTimeout("slide()",5000);
}
slide();
</script>
<script type="text/javascript">
var image1 = new Image()
image1.src = "img/barns/1.gif"
var image2 = new Image()
image2.src = "img/barns/2.gif"
var image3 = new Image()
image3.src = "img/barns/3.gif"
var image4 = new Image()
image4.src = "img/barns/4.gif"
</script>
<td align=center><a href="Barns.html"><figure><img src="img/barns/1.gif" alt="Barn Conversions" width="400" height="300" name="slide"/ ><figcaption style="color: #610B21">Barn Conversions</figure></td>
<script type="text/javascript">
var step=1;
function slideit()
{
document.images.slide.src = eval("image1"+step+".src");
if(step<3)
step++;
else
step=1;
setTimeout("slideit()",5000);
}
slideit();
</script>

Both your <img>s have the name "slide". You should give them different names so that the browser knows which one to work with. Something like "slide1" and "slide2" should do the job.

What is happening is you are using code that is conflicting with itself. You have defined images at a global level, then redefined them later when setting up the second show. You've also duplicated the step variable, although this may not matter so much if you use the same value. You're also affecting the same image using both slider scripts, so the target on one would need to change. A neater way around this is to use a single function adding some parameters so that you can deal with both sets of images and DOM elements.
something like:-
function slide( image_id, image_array) {
myImage = getElementById(image_id);
myImage.src = image_array[step];
}
Of course, there's a lot more to it than that, and there are plenty of examples of better featured image sliders out there that would be capable of running two separate instances. I'd suggest studying some of those.

How to implement image slide show using javascript

I tried implementing it.But..the image changes from the first to the secnd and then stops.
for your reference,please find the code i tried to implemented.
<div id="images"> <img name="slide" src="img/banner1.png"/>
<script type="text/javascript" >
var slideShow=document.getElementById("images");
var allImages= new Array();
allImages=["img/banner3.png","img/banner2.png","img/banner4.png","img/banner5.png"];
var imageIndex=0;
function changeImage()
{
document.images.slide.src=allImages[imageIndex];
//slideShow.setAtrribute("src",allImages[imageIndex]);
console.log("executing 1");
imageIndex++;
if(imageIndex >= allImages.length)
{
console.log("executing 2");
imageIndex=0;
}
}console.log("executing 3");
setTimeout("changeImage()",1000);
console.log("executing 4");
</script>
</div>
Can Someone,help me in fixing this issue..Please!

This is the similar script you are searching for...
Java Script
slide=new Array("images/2.jpg","images/3.jpg","images/4.jpg","images/5.jpg","images/6.jpg","images/8.jpg")
pic=0;
function start()
{
setInterval("fun()",3000);
}
function fun()
{
document.show.src=slide[pic];
pic++;
if(pic==6)
pic=0;
}
HTML
<body onLoad="start();>
-------
-------
</body>

If you want to make the infinite slide show use setInterval instead of setTimeout.
setInterval('changeImage()',1000);
Your code works as fine after changing it. Enjoy.

Simple Javascript Gallery

So I'm trying to loop through this array and change an image source every few seconds. Right now I have an onload event calling a setTimeOut method which should change the image 5 seconds after the page has loaded I would think, but it is doing it instantly. What is the problem? Here is my code:
<html>
<head>
<title>Ad Rotaror</title>
<script type="text/javascript">
var i = 0;
var ads = new Array(4);
ads[0]='promo1.gif';
ads[1]='promo2.gif';
ads[2]='promo3.gif';
ads[3]='promo4.gif';
ads[4]='promo5.gif';
function change()
{
if(i > 4)
i = 0;
document.images[0].src = ads[i];
i++;
}
</script>
</head>
<body>
<img src="promo1.gif" onload="setInterval(change(), 5000)" />
</body>
</html>

Change 'change()' to 'change'. You are calling the function immediately.