I am using an image rotator. It is not working properly and I don't know why.
I have used this for image placement in the content:
<p class="one"><img src="assets/image/746.jpg" width="200" height="200" alt="Main Image" id="rotator" /></p>
Here is the java I'm using:
<script type="text/javascript">
(function() {
var rotator = document.getElementById('rotator'); // change to match image ID
var imageDir = 'assets/image/'; // change to match images folder
var delayInSeconds = 5; // set number of seconds delay
// list image names
var images = ['661', '3MISTIT.jpg', '574.jpg'];
// don't change below this line
var num = 0;
var changeImage = function() {
var len = images.length;
rotator.src = imageDir + images[num++];
if (num == len) {
num = 0;
}
};
setInterval(changeImage, delayInSeconds * 1000);
})();
</script>
Not sure what I'm doing wrong. I get the original image when you first turn on the page. After that you only get the 3rd and 4th image. I don't have it live yet still trying to test.
Please help. Trying to add something dynamic to my index.