Currently at work we are using an Adobe Flash® for an ad rotator to show different promotions to our customers. Due to recent issues we are trying to come up with a way to improve the process to make updating it, as easy as possible. Not being a flash guy, I decided to venture out to find a solution using JavaScript. After a quick Google® search nothing peaked my interest, so I decided to try and write the solution from scratch. While in the end, my solution didn’t work out, I created what I believe to be a nice piece of code that I could share with the rest of you.
While pretty standard I’m sure, this script will work for anything from images, to swf files, to basic text. It is done utilizing the DOM and .innerHTML. So, here it is.
JavaScript
<script type="text/javascript">
function mySlideshow() {
var elem = document.getElementById('idHere'); // DIV ID of HTML to replace
if (elem) {
elem.innerHTML = 'codeHere' // place the code you want in the elem DIV here
}
setTimeout("slide2();",7000); // wait in milliseconds before starting slideTwo function
}
function slide2() {
var elem= document.getElementById('idHere'); // DIV ID of HTML to replace
elem.innerHTML = 'codeHere' // place the code you want in the elem DIV here
setTimeout("slide3()",7000); // wait in milliseconds before starting slideTwo
}
function slide3() {
var elem= document.getElementById('idHere'); // DIV ID of HTML to replace
elem.innerHTML = 'codeHere' // place the code you want in the elem DIV here
setTimeout("mySlideshow();",8000); // wait in milliseconds before restarting
}
</script>
HTML Code
<!-- place the ONLOAD attribute in the BODY tag --> <body onload="mySlideshow" ...> <!-- place this div wherever you want the changes to take place --> <div id="objPersonal"> ...place initial "elem" code here in case browser doesn't support JavaScript... </div><!-- #objPersonal -->
If you have any questions or comments please let me know.
Keep on taggin’
:cD
