CODEWITHSUNDEEP
javascripthtml
user
user

Reputation: 1001

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!

Upvotes: 2

Views: 4659

Answers (2)

Subedi Kishor
Subedi Kishor

Reputation: 5996

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.

Upvotes: 1

user2361114
user2361114

Reputation: 162

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>

Upvotes: 2

Related Questions