欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

js實現(xiàn)圖片淡入淡出效果

 更新時間:2021年09月17日 11:59:22   作者:fanfan_h  
這篇文章主要為大家詳細(xì)介紹了js實現(xiàn)圖片淡入淡出效果,文中示例代碼介紹的非常詳細(xì),具有一定的參考價值,感興趣的小伙伴們可以參考一下

本文實例為大家分享了js實現(xiàn)圖片淡入淡出的具體代碼,供大家參考,具體內(nèi)容如下

分析過程:

1.給最大父元素里添加多張圖片,讓第一張圖片的透明度為1 opacity: 1

其余圖片的透明度為0;
給圖片下面設(shè)置一排小點

2.獲取每張圖片,動態(tài)設(shè)置不同層級,層級大小從4到0依次設(shè)置;

Setz_index:function(){
        for(var i=0;i<this.Photo.length;i++ ){
            index=i;
            this.Photo[i].style.zIndex =this.Photo.length-i-1;
        }
    },

3.給圖片設(shè)置兩種出現(xiàn)的方式,順時針出現(xiàn)或者逆時針出現(xiàn);圖片變動的同時,對應(yīng)的小點也進(jìn)行變動。出現(xiàn)的圖片層級最高,透明度為一,其余圖片透明度為0,并且對應(yīng)的小點顏色變?yōu)榉凵?/p>

Animatezindex:function(math,count){
       for(var i=0;i<count;i++){
         for(var k=0;k<this.Photo.length;k++) {
            //console.log(1);
           var index=parseInt (this.Photo[k].style.zIndex );  //43210  04321 10432
           if(math=="n"){
             index++;    //小點從左向右變化顏色
             if(index ==this.Photo.length){
                 index=0;
                 this.Photo[k].style.opacity =0;
                 this.Crclelist [k].style.background ="#fff";
             }
             if(index==this.Photo.length-1){
                 this.Photo [k].style.opacity= 1;
                 this.Crclelist [k].style.background ="pink";
                 this.Savecolor= this.Crclelist [k];

             }
           }
             else{
               index--;   //小點從右向左變化顏色
               if(index==-1){
                   index=this.Photo.length-1;
               }
               if(index==this.Photo.length-1){
                   this.Photo [k].style.opacity= 1;
                   this.Crclelist [k].style.background ="pink";
                   this.Savecolor= this.Crclelist [k];
               }
               if(index==this.Photo.length-2){
                   this.Photo[k].style.opacity =0;
                   this.Crclelist [k].style.background ="#fff";
               }
           }
             this.Photo[k].style.zIndex =index;
         }
       }
    },

4.設(shè)置默認(rèn)值,讓第一個小點的顏色為粉色,當(dāng)鼠標(biāo)滑進(jìn)最大父元素時,圖片停止轉(zhuǎn)動;當(dāng)鼠標(biāo)滑進(jìn)小圓點時,分為兩種情況,從當(dāng)前的圓點的左邊進(jìn)入和右邊進(jìn)入。

Moren_set:function(){
        var that=this;
        that.Crclelist [0].style.background ="pink";
        that.Savecolor =that.Crclelist[0];
        that.Bigblock.onmouseenter=function(){
            //  console.log(1);
            window.cancelAnimationFrame ( glider.Timeset);
        };
        that.Bigblock.onmouseleave=function(){
            glider.Timelines();
        }
        //點的事件,跟隨圖片變化
        for(var i=0;i<that.Crclelist.length;i++){
            that.Crclelist[i].index=i;
            that.Crclelist[i].onmouseenter =function(){
              var oldindex=that.Savecolor.index;
              var newindex=this.index;  //鼠標(biāo)滑進(jìn)的圓點的索引 this指的是當(dāng)前的圓點的滑動事件
 //               console.log(newindex);
                if(newindex -oldindex >0) {   //從當(dāng)前圓點的右邊進(jìn)
                  var ri=newindex -oldindex;
                  //  console.log(ri);
                    var le= that.Crclelist.length-ri;
                   // console.log(le);
                    if(ri<=le){
                        console.log("向右",ri);
                        that.Animatezindex("n",ri);
                    }
                    if(ri>le){
                        console.log("向左",le);
                        that.Animatezindex("s",le);
                    }
                }
                else if(newindex -oldindex<0){
                    var ri1=Math.abs(newindex-oldindex)   ; //取絕對值
                    var le1=that.Crclelist.length-ri1;
                    if(ri1<=le1){
                        console.log("向左", ri1);
                        that.Animatezindex("s",ri1);
                    }
                    if(ri1>le1){
                        console.log("向右", le1);
                        that.Animatezindex("n",le1);
                    }

                }
            }
        }
    }

5.設(shè)置轉(zhuǎn)動事件,根據(jù)時間來改變控制圖片的轉(zhuǎn)動。

Timelines:function(){
        var nowtime=new Date().getTime ();
        if((nowtime -glider.Oldtime) >=glider.TimeDely ){
            glider.Oldtime =nowtime;
            glider.Animatezindex ("n",1);  //向 右變化
        }
        //可以通過setTimeout和setInterval方法來在腳本中實現(xiàn)動畫,
        // 但是這樣效果可能不夠流暢,且會占用額外的資源。
        //requestAnimationFrame方法用于通知瀏覽器重采樣動畫,循環(huán)播放。
        /*cancelAnimationFrame
        cancelAnimationFrame 方法用于取消先前安排的一個動畫幀更新的請求。*/
       glider.Timeset =window.requestAnimationFrame(glider.Timelines);
 }

以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。

相關(guān)文章

最新評論