Slideshow crash onmouseover

<!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>

 <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').onmouseover=function(){
         
                        if (timermain) {
                        clearTimeout(timermain);
                        
                      }
                
            }; 
              
     
              document.getElementById('slider').onmouseout=function(){
          //      clearTimout(timermain);
                massiv.dovr(addim);
                
            };
  
}
        
       
        
    </script>
</body>
</html>

Have you tried it in other browsers? I don’t have any images to display but it seems to be running in Opera - at least the vertical scrollbar is bouncing up and down like a yo-yo :smile:

I tried in firefox and chrome. i took images with the size 700X306px.

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.