Codice HTML:
<head>
       <script language="javascript">
          var interval = 3500; // You can change this value to your desired speed. The value is in 
milliseconds, so if you want to advance a slide every 5 seconds, set this to 5000.
          var switching = setInterval("toggleSlide(true)", interval);
          // direction = boolean value: true or false. If true, go to NEXT slide; otherwise go to PREV slide
          
          function toggleSlide(direction) {
             var elements = document.getElementsByClassName("hideable"); // gets all the "slides" in our slideshow
             // Find the LI that's currently displayed
             var visibleID = getVisible(elements);
             elements[visibleID].style.display = "none"; // hide the currently visible LI
             if(!direction) {
                 var makeVisible = prev(visibleID, elements.length); // get the previous slide
             }
             else {
                 var makeVisible = next(visibleID, elements.length); // get the next slide
             }
             elements[makeVisible].style.display = "block"; // show the previous or next slide
         }
         function getVisible(elements) {
              var visibleID = -1;
              for(var i = 0; i < elements.length; i++) {
                 if(elements[i].style.display == "block") {
                    visibleID = i;
                 }
              }
              return visibleID;
         }

          function prev(num, arrayLength) {
                if(num == 0) return arrayLength-1;
                else return num-1;
          }
          
          function next(num, arrayLength) {
             if(num == arrayLength-1) return 0;
                 else return num+1;
          }
	   </script>
</head>
...

<body>
...
<pre>
  <ul style="list-style-type: none; margin-left: -2em; width: auto;">
    <li id="1" class="hideable" style="display: block;"><img src="images/ppomezia.jpg" width="100%">
  </li>
    <li id="2" class="hideable"><img src="images/7.jpg" width="100%"></li>
    <li id="3" class="hideable"><img src="images/traffico.jpg" width="100%"></li>
   <!-- ... and so on --></ul>
</pre>     
...
</body>
Questo è un codice che ho trovato online, funziona, ma non perfettamente, ovvero appena si carica la pagina vengono mostrate tutte le foto che sono contenute e poi si raggruppano pian piano, una alla volta, sapete aiutarmi?