0

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>
4
Contributors
8
Replies
69
Views
1 Year
Discussion Span
Last Post by azegurb
0

You would find it very much easier to use an existing free jquery script than writing your own. That way you could test four or five variations with tried and tested scripts.
Then having found one you liked, you could modify it to work differently in your spare time.

0

but i want to write my own script, not to use another library. The reason is that when i write my own script i'll dive into the deep of DOM.

0

For ex when slide runs i put cursor on image and move cursor inside slide , it behaves so strange.what may be the problem ? I 'd like to say that image width is 700 px and height is 306 px. Thanks for.reply

Edited by azegurb

0

I edited this a bit, there is problem again

<!DOCTYPE html>

<html>
<head>
    <title>Page Title</title>
    <style>
        #slider a {

            display: none;
            position: absolute;
            top: 0px;
            left: 0px;
            z-index: -9;

        }
        #slider a img {

        }
        #slider a:first-child {

            display: block;

        }
    </style>

</head>

<body>
<div id="slider" style="width:700px;height: 306px; position: absolute; top:0px;left:0px;">
<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=12, enlik=700, timer, timermain, j, addim;

    var slider=document.getElementById('slider').getElementsByTagName('a');

    massiv.addEvent=function(target, functionref, tasktype){
        if (target.addEventListener)
            target.addEventListener(tasktype, functionref, false);
        else if (target.attachEvent)
            target.attachEvent('on'+tasktype, function(){return functionref.call(target, window.event)});
    };

    massiv.timePassed=0;

    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; background-repeat:no-repat");

                    el.appendChild(el2)

         }

        slider[i].appendChild(el);


    }


    console.log(massiv)





    /*dovr funksiyasi burdan baslayir */
  massiv.dovr=function(step){

    if (timer) {   clearInterval(timer); }
   var start = new Date;
        this.timePassed = new Date - start;


    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;

       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, vaxt;

    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';

        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.stop=function(){




  }
  massiv.dovr();
  document.getElementById('slider').style.border="1px solid";

               massiv.addEvent(document.getElementById('slider'), function(e){ //show drop down menu when main menu items are mouse over-ed

                if (timermain) {
                        clearTimeout(timermain);

                      }

               //       alert('salam');

                }, "mouseover");

            massiv.addEvent(document.getElementById('slider'), function(e){ //show drop down menu when main menu items are mouse over-ed



              //  alert(massiv.timePassed);
                massiv.dovr(++addim);





                }, "mouseout");


}



    </script>
</body>
</html>
0

Why not making it easier for people to help and create a fiddle or pen from your code, so they can experience too what you experience, because I asume no one knows what you're talking about. With a live example they might do and can even fork it with a solution.

Edited by gentlemedia

This topic has been dead for over six months. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.