js實現輪播圖--淡入淡出的效果。
阿新 • • 發佈:2019-01-30
window.onload = function(){
mv.app.toBanner(); }; var mv = {}; mv.tools = {}; mv.ui = {}; //淡入淡出也算是是一個公用元件 mv.ui.fadein = function(obj){ var value = 0 ; //淡入是從0開始的,即從0變成100 clearinterval(obj.timer); //清除舊的播放時間,防止多次點選有個加速的過程 obj.timer = setInterval(function() var iSpeed = 5; //速度為5 //當value值從0漲到100時,說明圖片從一個透明的變成了不透明.就需要讓變時器停下來. if(value==100) { clearInterval(obj.timer); } else { value += iSpeed; //讓加時器進行累加 obj.style.opacity = value/100; //把每一次值賦給當前顏色的透明度(opacity是0-1的值,所以要除以100) obj.style.filter = 'alpha(opacity='+value+')'; //相容 },30); }; mv.ui.fadeout = function(obj){ var value = 100 ; //淡出是從100開始的,即從100變成0 clearinterval(obj.timer); //清除舊的播放時間,防止多次點選有個加速的過程 obj.timer = setInterval(function() var iSpeed = -5; //每次都要遞減 //當value值減到0時,說明圖片就透明瞭.就需要讓變時器停下來. if(value==0) { clearInterval(obj.timer); } else { value += iSpeed; //讓加時器進行累加 obj.style.opacity = value/100; //把每一次值賦給當前顏色的透明度(opacity是0-1的值,所以要除以100) obj.style.filter = 'alpha(opacity='+value+')'; //相容 },30); }; mv.app = {} mv.app.toBanner = fuction(){ var oDd = document.getElementById('id'); //獲取div的id var aLi = document.getElementsByName('li') //獲取數個li var iNow = 0; //累加 var timer = setInterval(auto,3000);//3秒鐘輪換(自動播放器)(timer的作用是滑鼠移上去時會停下來) //自動播放,原理:所有li都淡出,讓第二個li都淡入,走完一次後再讓所有li淡出,第三個li淡入 //淡出的效果就是讓透明度從100變成0,淡入的效果就是從0變成100。 function auto(){ if(iNow == aLi.length-1){ inow = 0; //此時inow已經是最後一個,應該讓inow回到第一個 } else{ iNow++; } //讓所有li都淡出 for(var i=0;i<ali .length;i++){ mv.ui.fadeout(ali[i]); //讓所有元素都淡出 } mv.ui.fadein(aLi[iNow]); //讓當前 li淡入 } };