CODEWITHSUNDEEP
javascripthtmlcss
user2828552
user2828552

Reputation: 67

slideshow javascript not working

I am using below java script code to create slide show with images img1.jpg, img1.jpg and img3.jpg. But it is displaying just img1.jpg in the output. Please tell the problem.

<html>
<style>
#slideshow{width:310;height:210;border-style:solid;}
#slideshow>img{position:absolute;left:15;top:15}
</style>
<body>
<div id="slideshow">
<img id="imge" src="img1.jpg" height="200" width="300">
</div>
<script>
var count=2;
function mf()
{
document.getElementById("imge").src="img"+count+".jpg";
document.getElementById("imge").height="200";
document.getElementById("imge").width="300";
if(count<3)
count++;
else
count=1;
setTimeout("mf()",3000);
}
</script>
</body>
</html>

Upvotes: 1

Views: 414

Answers (1)

Gopherkhan
Gopherkhan

Reputation: 4342

You need to start off your script afterwards, with mf();

<script>
   var count=2;
   // if your script is at the bottom of the page, you can move 
   // these three lines out here
   var elem = document.getElementById("imge");  
   elem.height="200";
   elem.width="300";

   function mf() {

      elem.src="img"+ (count + 1) +".jpg"; // add 1 to grab images 1 through 3

      count = ((count + 1) % 3); // will loop from 0 to 2 and back again
      setTimeout(mf,3000);
   }
   mf(); // kick off the first iteration of the slideshow
</script>

Upvotes: 1

Related Questions