CODEWITHSUNDEEP
javascriptarrayshtmlslideshow
pushkar singh
pushkar singh

Reputation: 1

Trying to create a simple slideshow with javaScript but images are not changing

var getImage = document.getElementById("BCimage");
var imgArray = ["images/1.png","images/2.png","images/3.png","images/4.png"];
var countIndex=0;
function img(){
getImage.setAttribute("src", imgArray[countIndex]);
countIndex++;
if(countIndex>=imgArray.length){
countIndex=0;
}
}
setInterval(img, 5000);

Above is my simple js code to change images after every 5 sec. But the images are not shifting. Below is my HTML code:

<html>
<head>
<meta charset="ISO-8859-1">
<title>Insert title here</title>
</head>
<body>
<h1 id="h"><a href="">hi</a></h1>
<div id="divs">
<img alt="image" src="images/1.png" id="BCimage">

</div>


<script type="text/javascript" src="EventsJs.js"></script>

</body>
</html>

Upvotes: 0

Views: 52

Answers (1)

Arslan Ahmed
Arslan Ahmed

Reputation: 288

Check This link its running Example in JSFiddle and try to give us your html related problem in JSFiddle, Thanks

var getImage = document.getElementById("BCimage");
var imgArray = ["http://www.si.edu/Content/img/Home/youtube-40x40.png",
                "http://www.veryicon.com/icon/256/Emoticon/Black%20Power%20Emoticons/cry%20512x512.png",
 "http://www.trynova.org/wp-content/uploads/2013/03/rss-logo-40x40.png"
 ,
 "https://www.teleste.com/sites/default/files/media/fb_icon_40x40.png"];
var countIndex=0;
function img(){
getImage.setAttribute("src", imgArray[countIndex]);
countIndex++;
if(countIndex>=imgArray.length){
countIndex=0;
}
}
setInterval(img, 5000);

Click here to See Your Demo

i put online images in Your example for your understanding.

Upvotes: 2

Related Questions