Currently, I am in the process of constructing an iframe slideshow that consists of 7 webpages named event1.html to event7.html. To implement the automatic changing of the iframe source every 1 second, I am utilizing setInterval. However, I am facing an issue where the transition between pages appears abrupt and causes flickering. How can I eliminate this flickering effect and incorporate some smooth transitions without resorting to JQuery?
Below is the code snippet I have been working with:
var i=1;
function initialize()
{
iframeh = document.getElementById("eventholder");
iframeh.src="event1.html";
setInterval(function(){i=changesrc(i)},1000);
}
function changesrc(i)
{
iframeh.src="event"+i+".html";
if(i%7==0)
i=0;
return i+1;
}