problema con slideshow con js
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?
