js實現(xiàn)圖片淡入淡出效果
本文實例為大家分享了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)的小點也進行變動。出現(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è)置默認值,讓第一個小點的顏色為粉色,當鼠標滑進最大父元素時,圖片停止轉(zhuǎ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; //鼠標滑進的圓點的索引 this指的是當前的圓點的滑動事件 // console.log(newindex); if(newindex -oldindex >0) { //從當前圓點的右邊進 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)文章
JavaScript設(shè)計模式經(jīng)典之工廠模式
工廠模式定義一個用于創(chuàng)建對象的接口,這個接口由子類決定實例化哪一個類。接下來通過本文給大家介紹JavaScript設(shè)計模式經(jīng)典之工廠模式,感興趣的朋友一起學(xué)習(xí)吧2016-02-02JavaScript 俄羅斯方塊游戲?qū)崿F(xiàn)方法與代碼解釋
這篇文章主要介紹了JavaScript 俄羅斯方塊游戲,結(jié)合實例形式詳細分析了JavaScript 俄羅斯方塊游戲原理、實現(xiàn)步驟及相關(guān)操作注意事項,需要的朋友可以參考下2020-04-04layui下拉列表select實現(xiàn)可輸入查找的方法
今天小編就為大家分享一篇layui下拉列表select實現(xiàn)可輸入查找的方法,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧2019-09-09jfreechart插件將數(shù)據(jù)展示成餅狀圖、柱狀圖和折線圖
閑暇之余,學(xué)習(xí)了一下jfreechart圖表生成,結(jié)合大蝦們的著作,小弟進行了系統(tǒng)的總結(jié),真是獲益匪淺,這里推薦給小伙伴們,有需要的朋友可以參考下。2015-04-04JavaScript?中?this?關(guān)鍵字的作用及改變其上下文的方法
這篇文章主要介紹了JavaScript?中?this?關(guān)鍵字的作用和如何改變其上下文,通過使用?call,?apply,?bind?方法,可以改變函數(shù)中的?this?指向,從而在不同的上下文中使用同一個函數(shù),需要的朋友可以參考下2023-01-01JS addEventListener()和attachEvent()方法實現(xiàn)注冊事件
這篇文章主要介紹了JS addEventListener()和attachEvent()方法實現(xiàn)注冊事件,文中通過示例代碼介紹的非常詳細,對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2021-01-01