Hello Members,
I want to add a slideshow on header of my website, i have a js code of the same but as I add it…it works perfectly fine on firefox, chrome but it is not working on Internet explorer. Can anyone just have a look at my code & tell me where i’m wrong…thanx in advance…
The error which i’m getting on internet explorer is that as i load a website on IE then it shows only one image inspite of whole slideshow…pls help
My Code is
<script type="text/javascript">
Object.prototype.addEvent = function(evtType, func) {
if (this.addEventListener) {
this.addEventListener(evtType, func, true);
} else if (this.attachEvent) {
this.attachEvent('on' + evtType, func);
} else {
this['on' + evtType] = func;
}
}
function SlideShow(slideel, fadingSpeed, stopTime, stopOnMouseOver) {
var mouseIsOver = false;
var nexttime= null;
if (stopOnMouseOver) {
slideel.addEvent('mouseover', function() {
mouseIsOver = true;
});
slideel.addEvent('mouseout', function() {
mouseIsOver = false;
if(nexttime!=null) {
window.clearTimeout(nexttime);
self.next();
}
});
}
this.next = function() {
nexttime= null;
if (mouseIsOver) {
window.setTimeout(function() {self.next();}, 500);
return;
}
this.current.stop();
this.current = this.current.nextSlide;
this.current.start();
}
function createSlides() {
var imgs = slideel.getElementsByTagName('img');
var slides = [];
for (var i = 0; i < imgs.length; i++) {
slides[i] = new Slide(imgs[i], self);
}
for (var i = 0; i < slides.length; i++) {
if (i == slides.length - 1)
slides[i].nextSlide = slides[0];
else
slides[i].nextSlide = slides[i + 1];
}
self.current = slides[0];
slides[0].start();
function Slide(img, slideShow) {
img.style.opacity = '0';
this.start = function() {
window.setTimeout(function() {
fadeIn(100);
}, fadingSpeed);
}
this.stop = function() {
window.setTimeout(function() {
fadeOut(100);
}, fadingSpeed);
}
function fadeIn(i) {
img.style.opacity = 1. - i/100.;
if(--i>=0) {
window.setTimeout(function() {
fadeIn(i);
}, fadingSpeed);
} else {
nexttime= window.setTimeout(function() {
self.next();
}, 100 * fadingSpeed + stopTime);
}
}
function fadeOut(i) {
outtime= null;
img.style.opacity = i/100.;
if(--i>=0) {
window.setTimeout(function() {
fadeOut(i);
}, fadingSpeed);
}
}
}
}
var self = this;
createSlides(slideel);
}
</script>
</head>
<body>
<table width="900" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td><span id="slideshow" style="position: relative">
<img src="http://www.sitepoint.com/forums/images/img1.jpg" style="position: absolute; top: 0px; left: -1px" />
<img src="http://www.sitepoint.com/forums/images/img2.jpg" style="position: absolute; top: 0px; left: -1px" />
<img src="http://www.sitepoint.com/forums/images/img3.jpg" style="position: absolute; top: 0px; left: -1px" />
</span>
<script>
window.addEvent('load', function() {
new SlideShow(document.getElementById('slideshow'), 25, 500, true);
});
</script></td>