I am currently using this method to have a slidehow of promo images, everything working nice, but i would like to add a few things to it, like image transition (fade in) and little dots on the right bottom corner showing which image i am viewing and have the ability to switch to another image
How can i do this?
I am working on the circle buttons now, and the code looks like this so far
<div id="feature-image">
<img id="promo-image" src="images/pentagg.jpg" width="100%" height="800px" name="slide" />
<script type="text/javascript">
var step=1;
var imagesTotal= 2;
var circleDiv;
function slideit()
{
document.images.slide.src = eval("image"+step+".src");
if(step<imagesTotal)
step++;
else
step=1;
setTimeout("slideit()",5000);
}
slideit();
function createCircles()
{
for (i=0; i<imagesTotal; i++) {
circleDiv = document.createElement('div');
circleDiv.className = 'results';
circleDiv.style.width = '32px';
circleDiv.style.height = '32px';
circleDiv.style.backgroundColor = '#ff4444';
circleDiv.innerHTML = '<span class="msg">Hello world.</span>';
document.getElementsByTagName('feature-image')[0].appendChild(circleDiv);
//document.getElementsByTagName('body')[0].appendChild(circleDiv);
}
}
createCircles();
</script>
</div>
