19 Replies Latest reply: Jul 1, 2012 4:00 PM by Nancy O. RSS

    Add fade to rotating image javascript

    Helen Marino Community Member

      I have managed to get a tating image working with the following javascript:

       

      <script type="text/javascript">

      (function() {

          var rotator = document.getElementById('rotator'); 

          var imageDir = '';

          var delayInSeconds = 5;                           

          var images = ['h-images/homepage.jpg', 'h-images/rentalspage.jpg', 'h-images/investpage.jpg'];

          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>

       

      the page is www.helenmarino.com/test.html (you may have to refresh the page)

       

      I am surprised I managed to get this far so any simple code added to make the images fade nicely would be greatly appreciated.

       

      many thanks

       

      Helen