Hi All, I have written small slideshow script in Javascript with slice effect. I did functunality such pause function on mouseover. but when i mouseover the slide it crashes (if slice effect had gone it stops normally). what may be the problem. can anyone help me plzzz. Thanks in advance. below is my script in full html
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<style>
#slider a {
display: none;
}
#slider a img {
}
#slider a:first-child {
display: block;
}
</style>
</head>
<body>
<div id="slider" style="width:700px;height: 306px;">
<a href="#"><img src="images/banners/image-slider-1.jpg"></a>
<a href="#"><img src="images/banners/image-slider-2.jpg"></a>
<a href="#"><img src="images/banners/image-slider-3.jpg"></a>
<a href="#"><img src="images/banners/image-slider-4.jpg"></a>
<a href="#"><img src="images/banners/image-slider-5.jpg"></a>
</div>
<!--
<div>
<div style='background: url(images/banners/image-slider-1.jpg); top:0px;left:0px;position:inherit; width:700px;height: 306px;z-index: 1'>
</div>
<div style='background: url(images/banners/image-slider-2.jpg); top:0px;left:0px;position:inherit; width:700px;height: 306px;z-index: 2'>
</div>
<div style='background: url(images/banners/image-slider-3.jpg); top:0px;left: 0px;position:inherit; width:700px;height: 306px;z-index: 3'>
</div>
</div>-->
<script>
window.onload=function(){
var massiv=[], len=document.getElementById('slider').getElementsByTagName('a').length, slices=22, enlik=700, timer, timermain, j, addim;
var slider=document.getElementById('slider').getElementsByTagName('a');
for(var i=0;i<len;i++){
var obj={
imgname:document.getElementById('slider').getElementsByTagName('a')[i].childNodes[0].src,
value:i,
parent:document.getElementById('slider').getElementsByTagName('a')[i],
en:document.getElementById('slider').getElementsByTagName('a')[i].childNodes[0].width,
uzun:document.getElementById('slider').getElementsByTagName('a')[i].childNodes[0].height
};
if (i==(len-1)) {
j=0;
}
else {
j=i+1;
}
var en=slider[i].childNodes[0].width;
var uzun=slider[i].childNodes[0].height;
var ad=slider[j].childNodes[0].src;
var ad2=slider[i].childNodes[0].src;
massiv.push(obj);
var el=document.createElement('div');
el.setAttribute('id', 'divin'+i);
el.setAttribute("style", "width:"+en+"px;height:"+uzun+"px; background:url("+ad+")");
for(var n=0, d=0;n<slices;n++, d=(enlik/slices)*n){
var el2=document.createElement('div');
el2.setAttribute('id', 'divi'+i+n);
el2.setAttribute("style", "display:inline-block;vertical-align:bottom; float:left;overflow:hidden;width:"+enlik/slices+"px;height:"+uzun+"px; background:url("+ad2+");background-position: "+(-d)+"px 0px");
el.appendChild(el2)
}
slider[i].appendChild(el);
}
console.log(massiv)
/*dovr funksiyasi burdan baslayir */
massiv.dovr=function(step){
if (timer) { clearInterval(timer); }
step = (!step) ? 0 : step%this.length, that=this, saym=this.length;
if (step==0) {
this[saym-1].parent.style.display='none';
}
else {
this[step-1].parent.style.display='none';
}
this[step].parent.style.display='block';
this[step].parent.childNodes[0].style.display='none';
timer=setInterval(function(){that.acil(document.getElementById('divin'+step).childNodes, 0)},0);
timermain=setTimeout(function(){
that.dovr(++step);
}, 4000);
addim=step+1;
for(var n=0;n<slices;n++){
document.getElementById('divi'+step+n).style.height='306px';
document.getElementById('divi'+step+n).style.visibility='visible';
}
},
massiv.acil=function(obj, i){
var that=this;
if(obj && obj[i] && parseInt(obj[i].style.height)>0){
obj[i].style.height=parseInt(obj[i].style.height)-1+'px';
obj[i].style.borderRight="1px solid #c0c0c0";
obj[i].style.boxSizing='border-box';
// obj[i].style.marginTop='306'-parseInt(obj[i].style.height)+'px';
var vaxt=setTimeout(function(){ that.acil(obj, i+1) }, 30);
}
if(obj && obj[i] && parseInt(obj[i].style.height)<=0){
clearTimeout(vaxt);
obj[i].style.height='306px';
obj[i].style.visibility='hidden';
obj[i].style.borderRight="0px solid #c0c0c0";
// obj[i].style.marginTop='0px';
}
}
massiv.slide=function(){
}
massiv.dovr();
document.getElementById('slider').style.border="1px solid";
document.getElementById('slider').getElementsByTagName('a')[0].onmouseover=function(){
// clearInterval(timer);
if (timermain) {
clearTimeout(timermain);
}
};
document.getElementById('slider').onmouseout=function(){
// clearTimout(timermain);
massiv.dovr(addim);
};
}
</script>
</body>
</html>
